jQuery检查/取消选中单选button
我有这个代码来检查/取消选中一个单选button。
我知道这是不好的用户界面，但我需要这个。
$('#radioinstant').click(function() { var checked = $(this).attr('checked', true); if(checked){ $(this).attr('checked', false); } else{ $(this).attr('checked', true); } }); 上述function不起作用。
如果我点击button，没有任何改变。 它仍然被检查。 为什么？ 错误在哪里？ 我不是一个jQuery专家。 我在jQuery 1.3.2
只是要清楚#radioinstant是单选button的ID。
如果你所要做的只是检查一下checkbox，不用担心使用JQuery。 这是点击时checkbox的默认function。 不过，如果你想做更多的事情，你可以添加他们与JQuery。 在jQuery 1.9之前，你可以使用$(this).attr('checked'); 获取值而不是$(this).attr('checked', true); ，因为第二个会设定的价值。
这里是一个小提琴演示，显示默认的checkboxfunction与你正在用JQuery做什么。
注意： 在JQuery 1.6之后 ，你应该使用$(this).prop; 而不是$(this).attr在所有三个地方（谢谢@Whatevo指出这一点，并在这里看到更多的细节 ）。
更新：
对不起，错过了它必须是一个单选button的要求。 您仍然可能需要考虑checkbox，但这里是无线电input版本的更新代码。 它的工作原理是将 previousValue设置为checkbox的属性，因为我不认为1.3.2支持prop 。你也可以在范围variables中做这个，因为有些人不喜欢在字段上设置随机属性。 这是新的例子。
更新2：
正如Josh指出的，以前的解决scheme只能用一个单选button工作。 这是一个function，使一组收音机可以不受他们的名字，一个小提琴 ：
var makeRadiosDeselectableByName = function(name){ $('input[name=' + name + ']').click(function() { if($(this).attr('previousValue') == 'true'){ $(this).attr('checked', false) } else { $('input[name=' + name + ']').attr('previousValue', false); } $(this).attr('previousValue', $(this).attr('checked')); }); };
我已经扩大了以前的build议。 这适用于我，多个无线电相同的名称耦合。
$("input[type='radio']").click(function() { var previousValue = $(this).attr('previousValue'); var name = $(this).attr('name'); if (previousValue == 'checked') { $(this).removeAttr('checked'); $(this).attr('previousValue', false); } else { $("input[name="+name+"]:radio").attr('previousValue', false); $(this).attr('previousValue', 'checked'); } });
而不是得到检查值，你正在设置：
var checked = $(this).attr('checked', true);
为了得到它：
var checked = $(this).attr('checked');
一个工作解决scheme（具有不同值的多个单选button）：
// select radio buttons group (same name) var radioButtons = $("input[type='radio'][name='rr']"); // save initial ckecked states var radioStates = {}; $.each(radioButtons, function(index, rd) { radioStates[rd.value] = $(rd).is(':checked'); }); // handle click event radioButtons.click(function() { // check/unchek radio button var val = $(this).val(); $(this).prop('checked', (radioStates[val] = !radioStates[val])); // update other buttons checked state $.each(radioButtons, function(index, rd) { if(rd.value !== val) { radioStates[rd.value] = false; } }); });
PS： $().attr应该用来代替$().prop for jquery <1.6
演示： jsFiddle
最好的和最短的解决scheme。 它将适用于任何一组收音机（具有相同的名称）。
$(document).ready(function(){ $("input:radio:checked").data("chk",true); $("input:radio").click(function(){ $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk"); $(this).data("chk",!$(this).data("chk")); $(this).prop("checked",$(this).data("chk")); $(this).button('refresh'); // in case you change the radio elements dynamically }); });
更多信息， 在这里 。
请享用。
我相信这就是问题所在：如果你有多个单选button，而其中一个button被单击，则无法取消全部select。 需要的是一个“没有或只有一个”select器，所以checkbox将不合适。 你可以有一个“清除”button或类似的东西来取消所有的select，但是单击所选的单选button取消select并返回到“无”状态是很好的，所以你不要把你的UI弄乱一个额外的控制。
使用点击处理程序的问题是，当它被调用时，单选button已经被检查。 您不知道这是初始点击还是第二次点击已经选中的单选button。 所以我使用两个事件处理程序，mousedown来设置以前的状态，然后是上面使用的点击处理程序：
$("input[name=myRadioGroup]").mousedown(function () { $(this).attr('previous-value', $(this).prop('checked')); }); $("input[name=myRadioGroup]").click(function () { var previousValue = $(this).attr('previous-value'); if (previousValue == 'true') $(this).prop('checked', false); });
toggleAttr()由这个非常漂亮的小插件提供 。
示例代码
$('#my_radio').click(function() { $(this).toggleAttr('checked'); }); /** * toggleAttr Plugin */ jQuery.fn.toggleAttr = function(attr) { return this.each(function() { var $this = $(this); $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr); }); };
演示更有趣
你可以把你的单选button放在标签或button标签内，做一些很好的事情。
Jurrie回答的改进版本
$('#myRadio').off('click').on('click', function() { if ($(this).data('checked')) { $(this).removeAttr('checked'); $(this).data('checked', false); } else { $(this).data('checked', true); } });
现场演示
经过testing了一些上述解决scheme，这些解决scheme对我来说不是100％，我决定创build自己的解决scheme。 它会在单击单选button之后创build新的点击侦听器：
/** * Radio select toggler * enables radio buttons to be toggled when clicked * Created by Michal on 09/05/2016. */ var radios = $('input[type=radio]'); /** * Adds click listeners to all checkboxes to unselect checkbox if it was checked already */ function updateCheckboxes() { radios.unbind('click'); radios.filter(':checked').click(function () { $(this).prop('checked', false); }); radios.click(function () { updateCheckboxes(); }); } updateCheckboxes();
– 编辑 –
它看起来像你的代码是强制收音机input行为像一个checkboxinput。 你可能会考虑只使用checkboxinput，而不需要jQuery。 但是，如果你想强制执行，就像@manji所说的那样，你需要把值存储在点击处理程序的外部，然后在每次点击时将其设置为与当时相反。 @ manji的回答是正确的，我只是补充说，你应该cachingjQuery对象，而不是重新查询DOM：
var $radio = $("#radioinstant"), isChecked = $radio.attr("checked"); $radio.click(function() { isChecked = !isChecked; $(this).attr("checked", isChecked); });
DiegoP，
我遇到了同样的麻烦，直到我意识到，只有在属性被删除的情况下，对方框的检查才会消失。 这意味着，即使选中的值被设置为false，它仍将保留在那里。
因此，使用removeAttr（）函数，并删除选中的attrib，它将明确的工作。
如果你仍然有更多的答案，我发现这适用于所有单选button：
<script type="text/javascript"> jQuery(document).ready(function ($){ var allRadios = $('input[type=radio]') var radioChecked; var setCurrent = function(e) { var obj = e.target; radioChecked = $(obj).attr('checked'); } var setCheck = function(e) { if (e.type == 'keypress' && e.charCode != 32) { return false; } var obj = e.target; if (radioChecked) { $(obj).attr('checked', false); } else { $(obj).attr('checked', true); } } $.each(allRadios, function(i, val){ var label = $('label[for=' + $(this).attr("id") + ']'); $(this).bind('mousedown keydown', function(e){ setCurrent(e); }); label.bind('mousedown keydown', function(e){ e.target = $('#' + $(this).attr("for")); setCurrent(e); }); $(this).bind('click', function(e){ setCheck(e); }); }); }); </script>
此function将添加一个检查/取消选中所有单选button
jQuery(document).ready(function(){ jQuery(':radio').click(function() { if ((jQuery(this).attr('checked') == 'checked') && (jQuery(this).attr('class') == 'checked')) { jQuery(this).attr('class','unchecked'); jQuery(this).removeAttr('checked'); } else { jQuery(this).attr('class','checked'); }//or any element you want }); });
我采取了https://stackoverflow.com/a/13575528/80353并调整它是这样的;
$(document).ready(function() { $('body').on('click', 'input[type="radio"]', function() { changeCheckedAttributes($(this)); }); function changeCheckedAttributes(elt) { $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeData("chk"); $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeAttr("checked"); $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).prop("checked", false); $(elt).data("chk",!$(elt).data("chk")); $(elt).prop("checked", true); $(elt).attr("checked", $(elt).data("chk")); } });
我会build议这样的：
$('input[type="radio"].toggle').click(function () { var $rb = $(this); if ($rb.val() === 'on') { $rb.val('off'); this.checked = false; } else { $rb.val('on'); this.checked = true; } });
你的HTML看起来像这样：
<input type="radio" class="toggle" value="off" />
我有一个相关但不同的场景。 以下是我正在做的事情：
注意：select主单选button时，select/取消select“containerRadio”类的所有单选button的代码。
码
$('#selectAllWorkLot').click (function () { var previousValue = $(this).attr('previousValue'); if (previousValue == 'checked') { resetRadioButtonForSelectAll(); //Unselect All unSelectAllContainerRadioButtons(); } else { $(this).attr('previousValue', 'checked'); //Select All selectAllContainerRadioButtons(); } }); function resetRadioButtonForSelectAll() { $('#selectAllWorkLot').removeAttr('checked'); $('#selectAllWorkLot').attr('previousValue', false); //$('#selectAllWorkLot').prop('checked', false); } function selectAllContainerRadioButtons() { $('.containerRadio').prop('checked', true); } function unSelectAllContainerRadioButtons() { $('.containerRadio').prop('checked', false); }
我有一个相关的问题 – 我不得不打开一个对话框，从下拉菜单中select我将显示一个或两个单选button。 一次只能激活一个单选button。
- 选项1将显示两个单选button，并select第一个广播
- 选项2将显示第二个单选button并进行select。
该脚本工作一段时间它注入选中，但checkbox仍然未选中
我去了.prop() ，看起来像jquery .prop() .attr() .attr jquery .prop() .attr()有一些复杂的单选button，而使用ATTR或道具。 所以我所做的是触发基于select值的单选button上的点击。
这解决了使用attr或prop或使用冗长的代码的需要。
myForm = $("#myForm"); if (argument === 'multiple') { myForm.find('#radio1').parent('li').hide(); myForm.find('#radio2').trigger('click'); } else{ myForm.find('#radio1').trigger('click'); myForm.find('#radio1').parent('li').show(); }
不知道这是否是最好的做法，但它 – 像魅力
这里是简单的解决scheme，我希望它会帮助你。 这里有一个简单的例子来改善答案。
$('[type="radio"]').click(function () { if ($(this).attr('checked')) { $(this).removeAttr('checked'); $(this).prop('checked',false); } else { $(this).attr('checked', 'checked'); } });
演示对不起太晚了.. 🙂
最后一个解决scheme是为我工作的。 我有未定义和对象对象的问题，或总是返回false然后总是返回true，但是这个解决scheme，检查和取消检查时工作。
下面的代码显示了单击时的字段，并在未选中时隐藏了字段：
$("#new_blah").click(function(){ if ($(this).attr('checked')) { $(this).removeAttr('checked'); var radioValue = $(this).prop('checked',false); // alert("Your are a rb inside 1- " + radioValue); // hide the fields is the radio button is no $("#new_blah1").closest("tr").hide(); $("#new_blah2").closest("tr").hide(); } else { var radioValue = $(this).attr('checked', 'checked'); // alert("Your are a rb inside 2 - " + radioValue); // show the fields when radio button is set to yes $("#new_blah1").closest("tr").show(); $("#new_blah2").closest("tr").show(); }
我从这个问题尝试的解决scheme并不适合我。 部分工作的答案中，我仍然发现，我必须点击以前未经检查的单选button两次，才能再次检查。 我目前正在使用jQuery 3+。
在尝试使用数据属性或其他属性来解决这个问题之后，我最终通过使用类来解决问题。
对于你选中的无线电input，给它的类checked例如：
<input type="radio" name="likes_cats" value="Meow" class="checked" checked>
这里是jQuery：
$('input[type="radio"]').click(function() { var name = $(this).attr('name'); if ($(this).hasClass('checked')) { $(this).prop('checked', false); $(this).removeClass('checked'); } else { $('input[name="'+name+'"]').removeClass('checked'); $(this).addClass('checked'); } });
如果你点击使用，只检查收音机是否被选中，然后取消select，你将永远不会收到收音机检查。 所以也许最简单的是使用这样的类名：
if($(this).hasClass('alreadyChecked')) {//it is already checked $('.myRadios').removeClass('alreadyChecked');//remove from all radios $(this).prop('checked', false);//deselect this } else { $('.myRadios').removeClass('alreadyChecked');//remove from all $(this).addClass('alreadyChecked');//add to only this }
