Toggle Radio buttons checked status in jQuery [duplicate]

风格不统一 提交于 2019-12-23 05:37:14

问题


I want to slightly extend functions of Radio buttons, i.e. ability to un-check (on click, if it was previously checked).

HTML code is like -

<input type='radio' value='1' id='country_1' name='countries' class='option_selector'>
<label for='country_1'>India</label>
<input type='radio' value='2' id='country_2' name='countries' class='option_selector'>
<label for='country_2'>USA</label>
<input type='radio' value='3' id='country_3' name='countries' class='option_selector'>
<label for='country_3'>UK</label>

<input type='radio' value='1' id='city_1' name='cities' class='option_selector'>
<label for='city_1'>Jaipur</label>
<input type='radio' value='2' id='city_2' name='cities' class='option_selector'>
<label for='city_2'>Delhi</label>
<input type='radio' value='3' id='city_3' name='cities' class='option_selector'>
<label for='city_3'>Mumbai</label>

jQuery so far is -

$('.option_selector').click(function () {
    var id = $(this).attr('id');
    if($('#' + id).is(':checked')) {
        $("#" + id).prop("checked", false);
    } else {
        $("#" + id).prop("checked", true);
    }
});

I know why this is Not working - because eveytime I click on radio-button its initial status will be checked, therefore final status will be unchecked. But, I couldn't figure out to make it work in the desired way.

p.s. - For those, who are wondering, why I am not using checkboxes instead of radio buttons : I am trying to make quiz replica (for practice purpose) of My actual Examining body. They people don't use checkboxes, instead use radio buttons with an additional feature of un-select the option. So, I am just trying to avoid any un-necessary confusion.

Edit - 1 : It may or may not be duplicate of mentioned question. But, the solution in the mentioned question works on the basis of "group of radios deselectable by their name", which is not solving my problem.


回答1:


You would combine the click event and use a data-attribute to keep track of the state of the radio buttons:

$('.option_selector').on('click', function() {
    var id = this.id;
    if( $(this).data('checked') ) {
        $(this).prop('checked', false);
        $(this).data('checked', false);
    } else {
        $(this).data('checked', true);
    }
    console.log( id );
    $(':radio[name=' + this.name + ']').not(this).data('checked', false);
});

//another way to re-write the code
$('.option_selector').on('click', function() {
    var id = this.id;
    var waschecked = $(this).data('checked');
    if( waschecked ) {
        $(this).prop('checked', false);
    }
    $(this).data('checked', !waschecked)
    console.log( id );
    $(':radio[name=' + this.name + ']').not(this).data('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' value='1' id='country_1' name='countries' class='option_selector'>
<label for='country_1'>India</label>
<input type='radio' value='2' id='country_2' name='countries' class='option_selector'>
<label for='country_2'>USA</label>
<input type='radio' value='3' id='country_3' name='countries' class='option_selector'>
<label for='country_3'>UK</label>
<br/>
<input type='radio' value='1' id='city_1' name='cities' class='option_selector'>
<label for='city_1'>Jaipur</label>
<input type='radio' value='2' id='city_2' name='cities' class='option_selector'>
<label for='city_2'>Delhi</label>
<input type='radio' value='3' id='city_3' name='cities' class='option_selector'>
<label for='city_3'>Mumbai</label>



回答2:


I think, the only thing you need to do is check if checked. Don't include the else statement.

if($(this).is(':checked')) $(this).prop('checked', false);



回答3:


You can also use the attr like this:

$('.option_selector').click(function () {
var id = $(this).attr('id');
if($('#' + id).attr('checked')) {
    $("#" + id).attr("checked", false);
} else {
    $("#" + id).attr("checked", true);
}
});

http://jsfiddle.net/sandenay/mqpqgfL3/



来源:https://stackoverflow.com/questions/33155382/toggle-radio-buttons-checked-status-in-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!