如何取消選中單選按鈕

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("click", function(event){ $("#EditFormWrapper").slideUp("fast").empty(); $('input[name="BookItem"]').attr('checked', 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

我用這種方式在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 6

我剛剛發現了一個很好的解決方案。

假設您有兩個需要能夠檢查/取消選中的無線電，請實施此代碼並更改必要的內容：

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

：） 別客氣