如何取消选中单选按钮

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

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

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

Answer 2

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

<input type='reset' />

Answer 3

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

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

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

Answer 4

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

$("#editBTNcancel").on("点击", 函数(事件){
$("#EditFormWrapper").slideUp("快速").empty();
$('input[name="BookItem"]').attr('已检查', false);
});

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

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() 之间的区别。

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

:) 欢迎

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）来更改ckecked属性！！！

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

当您设置调试断点时它不起作用。