如何取消选中单选按钮答案

【问题标题】：How to Uncheck A radio button如何取消选中单选按钮
【发布时间】：2011-02-05 01:16:13
【问题描述】：

我有两种表单，一种带有单选按钮，用户必须选择才能编辑。

[form name="A"]
<li>[input type="radio" name="BookItem" value="1" /]</li>
<li>[input type="radio" name="BookItem" value="2" /]</li>
<li>[input type="radio" name="BookItem" value="3" /]</li>
[form]<p>

从表单（A）中选择“BookItem”后，我调用$("#EditFormWrapper").load("callEditData.cfm? ID="+ID);函数加载第二个表单（B）

<div id="EditFormWrapper"><div></p>
<!---//  begin dynamic form generated by external file callEditData.cfm  //--->
[form id="editForm" name="B"]
<ul class="hourswrapper">
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs1" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs1" /> 2 Hours PM</li>
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs2" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs2" /> 2 Hours PM</li>
</ul>
[input type="image" src="images/submit-btn.gif" id="addBTN" name="addBTN" class="buttons" alt="SubmitRrequest" /]
[input type="image" src="images/cancel-btn.gif" id="editBTNcancel" name="editBTNcancel" class="buttons" alt="Cancel Request" /]
[/form]
<!---//  end dynamic form from external file //--->

当用户单击表单 (B) 中的取消按钮 (editBTNcancel) 时，我想取消选中表单 (A) 上的单选按钮。

这是我的脚本：

$("#editBTNcancel").live("click", function(event){
    event.preventDefault();
    $("#EditFormWrapper").slideUp("fast").empty();
    //$('.TOR2Hours').removeAttr('checked');
    $('.TOR2Hours').attr('checked', false);
});

我希望我清楚地说明我的问题，任何建议将不胜感激！

【问题讨论】：

您能否发布包含单选按钮的 HTML。 .removeAttr('checked') 和 .attr('checked', false) 都为我工作。 jsfiddle.net/JAEsd 还有，你在什么浏览器上测试这些？
请将您的代码重新发布为 HTML，而不是 BB 代码
$(radio).attr('checked', false) 是正确的，对我有用。你确定你选择了正确的元素吗？我在你的收音机里没有看到class="TOR2Hours"。
仅对我而言 .removeAttribute('checked') 有效

标签： javascript jquery radio-button dynamic-forms

【解决方案1】：

我不确定您到底想要什么，但您可以尝试使用重置输入。

<input type='reset' />

【讨论】：

完全同意，或者我回答不是控制，而是reset 事件
感谢您的回复，但单选按钮的形式不同，所以这不起作用。
@user281867：致电reset 获取单选按钮所在的表单。document.getElementById("radiobuttonsform").reset();
感谢维托雷，此文档。getElementById("radiobuttonsform").reset();有效！！！
对不起，这晚了 8 年。如果您要注意清晰的 HTML 语义，您应该将您的重置设置为与其重置的控件相同的形式。说“它的形式不同”表明您的表格以一种令人困惑的方式放在一起。我知道您可能如何使用<form> 元素来划分页面上的表单控件，但您可能不需要也可以使用<fieldset>、<section>、<p> 或<div>。或者，也许您有不同的表单指向不同的端点，在这种情况下，您可以为每个表单提供单独的重置控件。

【解决方案2】：

鉴于这几乎是最简单的 DOM 任务，并且适用于每个可编写脚本的浏览器，我建议不要使用 jQuery 方法：

$(".TOR2Hours")[0].checked = false;

我遇到的另一件事是您的选择器是否正确。您的意思是按类选择一组元素还是应该是一个 ID 选择器？

【讨论】：

【解决方案3】：

我刚刚发现了一个很好的解决这个问题的方法。

假设您有两个需要能够被选中/取消选中的收音机，实现此代码并更改必要的内容：

var gift_click = 0;
    function HandleGiftClick() {
        if (document.getElementById('LeftPanelContent_giftDeed2').checked == true) {
            gift_click++;
            memorial_click = 0;
        }
        if (gift_click % 2 == 0) {document.getElementById('LeftPanelContent_giftDeed2').checked = false; }
    }
    var memorial_click = 0;
    function HandleMemorialClick() {          
        if (document.getElementById('LeftPanelContent_memorialDeed2').checked == true) {
            memorial_click++;
            gift_click = 0;
        }
        if (memorial_click % 2 == 0) { document.getElementById('LeftPanelContent_memorialDeed2').checked = false; }
    }

:) 欢迎您

【讨论】：

不知道为什么这个答案是-1。这更接近于可接受的答案，因为它解决了取消选中无线电输入的最困难部分——事件序列。每个人都应该知道明显的checked 属性——实际上，您甚至可能不关心这个，这取决于您使用的框架。 问题是当你收到一个事件——比如点击——当你取消选中收音机时它可能总是显示checked === true。到目前为止，这可能是这里最深思熟虑的答案。

【解决方案4】：

你可以像这样访问表单...

var exampleForm = document.forms['form_name'];

然后循环表单

for( var i=0; i<exampleForm.length; i++ ){
   alert( exampleForm[i].type );
}

你可以像这样测试检查...

if( exampleForm[i].checked )

要取消选中选中的单选按钮，请尝试...

exampleForm[i].checked=false;

最终的代码应该是这样的......

var exampleForm = document.forms['form_name'];
for( var i=0; i<exampleForm.length; i++ ){
   if( exampleForm[i].type ) == 'radio' && exampleForm[i].checked == true ){
       exampleForm[i].checked = false;
   }
}

【讨论】：

你的第一段代码应该写成document而不是documents。不过答案很好。
有什么方法可以判断收音机是否被取消选择？我在框架中工作了这么久...刚刚意识到onchange 实际上是onchangedtotrue...如果我在一个组中的每个收音机上都有听众，为了获得选定的按钮，不应该所有其他听众在该组中，每次选择一个新组时都会使用event.target.checked === false 触发？复选框就是这样工作的，对吧？

【解决方案5】：

我用这种方式解决你在 ASP.net 中的问题，检查一下..

radioButton.InputAttributes["show"] = "false"; 
string clickJs = " if(this.show =='true'){this.show ='false'; this.checked = false;}else{this.show='true'; this.checked = true;};";  

radioButton.Attributes["onClick"] = clickJs;

在asp.net中，可以使用这种方式添加属性。并且你也可以手动给radioButton添加一个属性，并做函数(clickJs)来改变被检查的属性！！！

【讨论】：

【解决方案6】：

您的选择器完全错误。如果您想从第一个表单中取消选中单选按钮，您应该使用 $('input[name="BookItem"]') 而不是 $('.TOR2Hours') ：

$("#editBTNcancel").on("click", function(event){ $("#EditFormWrapper").slideUp("fast").empty(); $('input[name="BookItem"]').attr('checked', false); });

至于使用哪种方法取消选中单选按钮，以下3种方法应该都可以工作：

$('input[name="BookItem"]').attr('checked', false);
$('input[name="BookItem"]').removeAttr('checked');
$('input[name="BookItem"]').prop('checked', false);

但是，请查看 jQuery prop() 上的 jQuery 文档，了解 attr() 和 prop() 之间的区别。

【讨论】：