I have a LOT of radio buttons that grab a value from my database and if it is set to "1", I make the radio button checked.
If a radio button is checked, and a user clicks on it again, I still want to be able to clear this button. Does anyone have an idea?
$radio1
grabs data from database and will be either 0, 1, or 2
<input value="1" name="radio1" type="radio"<?php if($radio1==1){echo " checked";} ?>>
<input value="2" name="radio2" type="radio"<?php if($radio1==2){echo " checked";} ?>>
Varun Malhotra's Answer slightly modified: I changed 2 lines of code that worked a little better for me. But overall, Varun's answer was PERFECT!
$('input[type="radio"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
{
$radio.prop('checked', true);
$radio.data('waschecked', true);
}
// remove was checked from other radios
$radio.siblings('input[type="radio"]').data('waschecked', false);
});
I'll suggest to add a custom attribute to keep track of each radio's previous state like so:
$(function(){
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
});
});
You will also need to add this attribute to the initially checked radio markup
<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />
UPDATE:
$(function(){
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[type="radio"]').data('waschecked', false);
});
});
But do ensure that you don't have other radio-groups to work with, otherwise you have to provide some attributes to specify these buttons like name prop I focused earlier.
This should work more generally than the other solutions as it handles cases where all radios are not in the same parent.
var $radios = $('input[type="radio"]');
$radios.click(function () {
var $this = $(this);
if ($this.data('checked')) {
this.checked = false;
}
var $otherRadios = $radios.not($this).filter('[name="'
+ $this.attr('name') + '"]');
$otherRadios.prop('checked', false).data('checked', false);
$this.data('checked', this.checked);
});
Change event fires before click when you do first click. You can use them. Working with many radio groups and even if you have prechecked radio buttons.
$("input[type=radio]").each(function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
Try this
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else{
$radio.data('waschecked', true);
}
// remove was checked from other radios
$('input[name="rad"]').not($(this)).data('waschecked', false);
});
$("input[type=radio]").on('click', function () {
if ($(this).is(':checked')) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
Here's my solution, which works for touch devices as well as mouse clicks:
$('input[type=radio]').bind('touchstart mousedown', function() {
this.checked = !this.checked
}).bind('click touchend', function(e) {
e.preventDefault()
});
I don't know exactly why but the selected answer by user softvar did not work for me, so I came up with the following based on softvar's answer, after about two hours of trying. Putting it here in case it may help someone else. You can specify "data-active" in HTML as 0 or 1 based on the "selected" value you get from the DB.
<input type="radio" name="user" value="1" data-active="0"> User 1
<input type="radio" name="user" value="2" data-active="0"> User 2
and
$('input[name="user"]').on('click', function() {
if ($(this).data('active') == 0) {
$('input[name="user"]').data('active', 0);
$(this).data('active', 1);
} else {
$(this).data('active', 0);
$(this).prop('checked', false);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.