如何取消选中单选按钮

Question

我有两个表单，其中一个包含单选按钮，用户需要选择该按钮才能编辑。

[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);
});

希望我已经清楚地陈述了我的问题，任何建议都将不胜感激！

- user281867

---

你能发布包含单选按钮的HTML吗？.removeAttr('checked')和.attr('checked', false)对我都有效。http://jsfiddle.net/JAEsd/ 另外，你在哪个浏览器上测试这些内容？ - Anurag

请将您的代码重新发布为HTML格式，而不是BB代码。 - Justin Johnson

$(radio).attr('checked', false) 是正确的，并且对我有效。您确定选择了正确的元素吗？我在您的单选按钮中没有看到 class="TOR2Hours"。 - bobince

对我来说，只有.removeAttribute('checked')有效。 - Qohelet

Answer 1

您可以这样访问表单...

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;
   }
}

- brock

---

你的第一段代码应该写成 document 而不是 documents。不过回答很好。 - RustyTheBoyRobot

有没有办法判断收音机是否已被取消选择？我在框架中工作了这么长时间...才意识到 onchange 实际上是 onchangedtotrue...如果我在组中的每个单选按钮上都有监听器，为了获取所选按钮，难道不应该在选择新按钮时触发该组中所有其他监听器，并且 event.target.checked === false 吗？复选框就是这样工作的，对吧？ - Cody

Answer 2

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

<input type='reset' />

- jeremysawesome

---

完全同意，或者像我回答的那样，不是控件，而是“重置”事件。 - vittore

感谢您的回复，但是单选按钮不在同一个表单中，所以这样做不起作用。 - user281867

调用 reset 方法重置包含单选按钮的表单。使用 document.getElementById("radiobuttonsform").reset();。 - vittore

谢谢Vittore，这个document.getElementById("radiobuttonsform").reset(); 真的有效！！！ - user281867

抱歉，这已经晚了8年。如果您关注清晰的HTML语义，您应该将重置放在与其重置的控件相同的表单中。说“它不在同一个表单中”表明您的表单组合方式很混乱。我知道您可能已经使用<form>元素来划分页面上的表单控件，但您可能不需要这样做，可以改用<fieldset>、<section>、<p>或<div>。或者，也许您有不同的表单指向不同的端点，在这种情况下，您可以为每个表单提供单独的重置控件。 - Simon Dell

Answer 3

考虑到这是最简单的DOM任务之一，并且适用于每个支持脚本的浏览器，建议不使用jQuery方法：

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

我想到的另一件事是你的选择器是否正确。你是想通过类名选择一组元素，还是应该使用ID选择器？

- Tim Down

Answer 4

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

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

就取消单选按钮而言，以下三种方法都应该可以：

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

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

- Joel Kornbluh

Answer 5

我刚刚发现了一个很好的解决方案。

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

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; }
    }

不客气 :)

- Jacob Gaiski

---

不知道为什么这个答案得了-1分。它更接近一个可接受的答案，因为它解决了取消选中单选按钮最困难的部分--事件顺序。每个人都应该知道显而易见的“checked”属性--实际上，根据您使用的框架，您可能甚至不关心这一点。问题在于，当您收到一个事件--比如点击--当您取消选中单选按钮时，“checked === true”可能总是显示。这可能是迄今为止最深思熟虑的答案。 - Cody

Answer 6

我使用这种方式来解决你在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）以更改已选属性！！！

- Jason SP Lin

Answer 7

它总是有效的，除非你设置了调试断点。

var auswahl_dachaufbau = document.querySelectorAll('input[type="radio"][name="dachart"]');
// Damit man Radio-Buttons auch unchecked machen kann

Array.prototype.forEach.call(auswahl_dachaufbau, function(rd) {
    // Event-Listener für Radio-Buttons 
    rd.addEventListener("mousedown", function(e) {
        let id = e.target.id;
        if (this.checked) {
            // Das Setzen der onclick-function auf diese Weise ist dafür da, damit man
            // Radio-Buttons auch unchecked machen kann ohne einen neuen Radio-Button auszuwählen
            // Seltsamerweise ist das nicht möglich ohne weiteres
            this.onclick = function() {
                this.checked = false;
            }
        } else {
            this.onclick = null;
        }
    });
});

当你设置调试断点时，它无法正常工作。

- siffkroete