簡體   English   中英

使用收音機和復選框進行JavaScript“全部檢查”

[英]JavaScript “Check All” with Radio and Checkboxes

我在JS中有一個函數可以檢查表單中的所有復選框:

function CheckAll(chk){
    for (i = 0; i < chk.check.length; i++)
        if (chk.All.checked==true){
            chk.check[i].checked = true;
            chk.check[i].disabled = true;
        }
        else {
            chk.check[i].disabled = false;
            chk.check[i].checked = false;
        }
}

我最近在我的表單中添加了一些radio按鈕,我的問題是: 這個函數是否會激活我的所有單選按鈕 (我知道只能選擇一個單選按鈕,但我不確定它在腳本中是如何工作的像那樣..)?

在這里你可以找到我的表單代碼:

<form name='MyForm'>
    <b>This is my Simple Form</b></br>
    </br>
    <input type='radio' name='parameter' value='ONE' checked='checked' />ONE<br/>
    <input type='radio' name='parameter' value='TWO' />TWO<br/>
    <input type='radio' name='parameter' value='THREE' />THREE<br/>
    <input type='radio' name='parameter' value='FOUR' />FOUR<br/>
    <input type='radio' name='parameter' value='FIVE' />FIVE<br/>
    <input type='radio' name='parameter' value='SIX' />SIX<br/>
    <input type='radio' name='parameter' value='SEVEN' />SEVEN<br/>
    <script>
        document.write("</br>");
        var count
        var check_value = new Array()
        check_value[0] = "001"
        check_value[1] = "002"
        check_value[2] = "003"
        check_value[3] = "004"
        for(count in check_value){
            var checkbox = "<input type='checkbox' name='check' value='"+check_value[count]+"' />"
            document.write(checkbox + check_value[count] + "  ");
        }
        document.write("<input type='checkbox' name='All' value='All' onClick='CheckAll(document.MyForm);' /> All");
    </script>
    </br>
    </br>
    <input type=button value='Ok' onClick='foo(document.MyForm);'>
</form>

如果這不能按我的意願工作,我該如何解決?

測試很簡單: http//jsfiddle.net/yk9uD/

內容:

<form name='MyForm'>
    <b>This is my Simple Form</b></br>
    </br>
    <input type='radio' name='parameter' value='ONE' checked='checked' />ONE<br/>
    <input type='radio' name='parameter' value='TWO' />TWO<br/>
    <input type='radio' name='parameter' value='THREE' />THREE<br/>
    <input type='radio' name='parameter' value='FOUR' />FOUR<br/>
    <input type='radio' name='parameter' value='FIVE' />FIVE<br/>
    <input type='radio' name='parameter' value='SIX' />SIX<br/>
    <input type='radio' name='parameter' value='SEVEN' />SEVEN<br/>
    <script>
      function CheckAll(chk){
  for (i = 0; i < chk.check.length; i++) {
        if (chk.All.checked==true){
            chk.check[i].checked = true;
            chk.check[i].disabled = true;
        }
        else {
            chk.check[i].disabled = false;
            chk.check[i].checked = false;
        }
}
}
        document.write("</br>");
        var count;
        var check_value = new Array()
        check_value[0] = "001"
        check_value[1] = "002"
        check_value[2] = "003"
        check_value[3] = "004"
        for(count in check_value){
            var checkbox = "<input type='checkbox' name='check' value='"+check_value[count]+"' />"
            document.write(checkbox + check_value[count] + "  ");
        }
        document.write("<input type='checkbox' name='All' value='All' onClick='CheckAll(document.MyForm);' /> All");
    </script>
    </br>
    </br>
    <input type=button value='Ok' onClick='foo(some var);'>
</form>

問題的答案是:不,它不會選擇所有單選按鈕。

原因是您的代碼僅針對名稱為check輸入進行迭代:

for (i = 0; i < chk.check.length; i++) {

不,它不適用於單選按鈕。 單選按鈕的名稱與復選框的名稱不同。 因此,您的功能不會觸摸單選按鈕。 但是,如果您為類提供了一個事件,提供單選按鈕和復選框相同的類名,該函數還將包括單選按鈕。 但在這種情況下,只會檢查最后一個單選按鈕。 實際上,代碼執行時會檢查所有單選按鈕。 但是,當再次找到具有相同名稱的單選按鈕時,將刪除先前檢查的屬性,並將checked屬性轉到當前節點。

如果要檢查選中的哪個單選框,則可以使用以下代碼。

$('.myclass input[name="radio_box_name"]:checked').val())

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM