问题
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