javascript 第二次单击时取消选中单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19895073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio button uncheck on second click
提问by bryan
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.
我有很多单选按钮从我的数据库中获取一个值，如果它设置为“1”，我会选中单选按钮。
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?
如果选中一个单选按钮，并且用户再次单击它，我仍然希望能够清除此按钮。有没有人有想法？
$radio1grabs data from database and will be either 0, 1, or 2
$radio1从数据库中获取数据并将是 0、1 或 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!
Varun Malhotra 的回答略有修改：我更改了 2 行对我来说效果更好的代码。但总的来说，Varun 的回答是完美的！
$('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);
});
回答by softvar
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.
但是请确保您没有其他无线电组可以使用，否则您必须提供一些属性来指定这些按钮，例如我之前关注的名称道具。
回答by Bertrand Bordage
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);
});
回答by mrsnowin
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;
});
});
回答by Phong Phan
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);
});
回答by Bohdan Vorona
$("input[type=radio]").on('click', function () {
if ($(this).is(':checked')) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
回答by Better Deal
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()
});
回答by Envayo
I don't know exactly why but the selected answer by user softvardid 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.
我不知道确切的原因，但是用户softvar选择的答案对我不起作用，所以经过大约两个小时的尝试，我根据 softvar 的答案想出了以下内容。把它放在这里以防它可以帮助别人。您可以根据从数据库获得的“选定”值，将 HTML 中的“数据活动”指定为 0 或 1。
<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);
}
});
