使用JavaScript檢查所有複選框

我想要第一個複選框允許我選中或取消選中所有其他框。這裏是我使用的代碼：使用JavaScript檢查所有複選框

<html> 
<head> 
<script language="JavaScript"> 
function toggle(source) { 
    checkboxes = document.getElementsById('checkall'); 
    for(var i in checkboxes) 
    checkboxes[i].checked = source.checked; 
} 
</script> 
</head> 
<body> 
<input type='checkbox' onClick='toggle(this)' /><br /> 
<input type='checkbox' id='checkall' name='orders[0][order_id]' value='16885' /><br /> 
<input type='checkbox' id='checkall' name='orders[1][order_id]' value='17006' /><br /> 
<input type='checkbox' id='checkall' name='orders[2][order_id]' value='17006' /><br /> 
<input type='checkbox' id='checkall' name='orders[3][order_id]' value='17007' /><br /> 
<input type='checkbox' id='checkall' name='orders[4][order_id]' value='17011' /><br /> 
</body> 
</html>

來源

2012-02-29 Chris Edwards

爲什麼複選框ID是相同的？ ID必須是唯一的不同。 – 2012-02-29 03:16:40

我相信像這樣的問題已經有很多了...... – 2012-02-29 03:28:23

我搜索了所有嘗試不同的例子，並可以讓他們工作，但現在在別人的幫助下，它完美地工作。謝謝！！ – 2012-02-29 18:01:51

這對我有效。

function toggle(oInput) { 
    var aInputs = document.getElementsByTagName('input'); 
    for (var i=0;i<aInputs.length;i++) { 
     if (aInputs[i] != oInput) { 
      aInputs[i].checked = oInput.checked; 
     } 
    } 
}

不過，如果你想在此僅限制於某些複選框，一個類名加給他們，併到主複選框

<html> 
<head> 
<script type="text/javascript"> 
    function toggle(source) { 
     var aInputs = document.getElementsByTagName('input'); 
     for (var i=0;i<aInputs.length;i++) { 
      if (aInputs[i] != source && aInputs[i].className == source.className) { 
       aInputs[i].checked = source.checked; 
      } 
     } 
    } 
</script> 
</head> 
<body> 
<input type='checkbox' class='checkall' onClick='toggle(this)' /><br /> 
<input type='checkbox' class='checkall' name='orders[0][order_id]' value='16885' /><br /> 
<input type='checkbox' class='checkall' name='orders[1][order_id]' value='17006' /><br /> 
<input type='checkbox' class='checkall' name='orders[2][order_id]' value='17006' /><br /> 
<input type='checkbox' class='checkall' name='orders[3][order_id]' value='17007' /><br /> 
<input type='checkbox' class='checkall' name='orders[4][order_id]' value='17011' /><br /> 
</body> 
</html>

來源

2012-02-29 03:18:38 Umbrella

完美，謝謝大家的幫助。 – 2012-02-29 18:00:50

的ID都應該是獨一無二的 - 從未有不止一個HTML元素具有相同id，它是無效的。這也是爲什麼你有一個問題 - 沒有這樣的方法document.getElementsById，只有document.getElementById。相反，你可以使用類。以下是如何解決你的問題在純JavaScript：

function toggle(source) { 
    var inputs = document.getElementsByTagName('input'); 
    var i, input; 

    for(i = 0; input = inputs[i]; i++) { 
     if((' ' + input.className + ' ').indexOf(' checkall ') > -1) { 
      input.checked = source.checked; 
     } 
    } 
}

和更改所有的id="checkall" s到class="checkall"。

或者你可以使用jQuery。這是偉大的，並做所有的事情;）

來源

2012-02-29 03:17:21 Ryan

問題是你所有的複選框組使用相同的ID。一個ID必須是唯一的頁面。相反，您可以使用複選框名稱。由於名稱的值爲[]，因此可以使用indexOf來檢查第一部分。

<html> 
<head> 
<script language="JavaScript"> 
function toggle(source) { 
    // Get all input elements 
    var inputs = document.getElementsByTagName('input'); 
    // Loop over inputs to find the checkboxes whose name starts with `orders` 
    for(var i =0; i<inputs.length; i++) { 
    if (inputs[i].type == 'checkbox' && inputs[i].name.indexOf('orders') === 0) { 
     inputs[i].checked = source.checked; 
    } 
    } 
} 
</script> 
</head> 
<body> 
<input type='checkbox' onClick='toggle(this)' /><br /> 
<input type='checkbox' id='checkall' name='orders[0][order_id]' value='16885' /><br /> 
<input type='checkbox' id='checkall' name='orders[1][order_id]' value='17006' /><br /> 
<input type='checkbox' id='checkall' name='orders[2][order_id]' value='17006' /><br /> 
<input type='checkbox' id='checkall' name='orders[3][order_id]' value='17007' /><br /> 
<input type='checkbox' id='checkall' name='orders[4][order_id]' value='17011' /><br /> 
</body> 
</html>

來源

2012-02-29 03:18:32

你可以簡單地包裝所有複選框，你NEAD itterate THROU成div和獲得它的childNodes和使用getElementById訪問DIV

<head> 
<script language="JavaScript"> 
function toggle(source) { 
    //use getElementById to access to DOM objects by ID 
    var checkboxes = document.getElementById('checkall').childNodes; 
    var source = document.getElementById('source'); 
    //now just itterate throu all checkboxess that is in the 'checkall' DIV 
    for(var i in checkboxes) { 
    checkboxes[i].checked = source.checked; 
    } 
} 
</script> 
</head> 
<body> 
<!--Give an ID to the source checkbox so we could access it from Javascript--> 
<input id="source" type='checkbox' onClick='toggle(this)' /><br /> 

<!--Just wrap all checkboxes that you nead to itterate into the DIV--> 
<div id="checkall"> 
<input type='checkbox' name='orders[0][order_id]' value='16885' /><br /> 
<input type='checkbox' name='orders[1][order_id]' value='17006' /><br /> 
<input type='checkbox' name='orders[2][order_id]' value='17006' /><br /> 
<input type='checkbox' name='orders[3][order_id]' value='17007' /><br /> 
<input type='checkbox' name='orders[4][order_id]' value='17011' /><br /> 
</div> 

</body> 
</html>

來源

2012-02-29 03:31:02

嘗試......

<form id="form_"><br/> 
    <input type='checkbox' name='item1' value='16885' /> 
    <input type='checkbox' name='item1' value='17006' /> 
    <input type='checkbox' name='item1' value='17006' /> 
    <input type='checkbox' name='item1' value='17007' /> 
    <input type='checkbox' name='item1' value='17011' /> 
    <a href="javascript:;" id="select_all1"><br/>Select All</a> 
    <a href="javascript:;" id="clear_all1"><br/>Clear All</a> 
    <button id="btnRemove1"><br/>Remove</button> 
</form> 

<script><br/> 
$("#select_all1").click(function() { 
    var item = document.getElementsByName("item1"); 
    for (var i=0; i < item.length; i++) { 
     item[i].setAttribute("checked"); 
    } 
}); 
$("#clear_all1").click(function() { 
    var item = document.getElementsByName("item1"); 
    for (var i=0; i < item.length; i++) { 
     if(item[i].checked) { 
      item[i].removeAttribute("checked"); 
     } else { 
      alert("Nothing to clear."); 
      return false; 
     } 
    } 
}); 
$("#btnRemove1").click(function() { 
    var items = $('.item1').is(':checked'); 
    if(items) { 
      window.location = "/contents?"+ $("form#form_").serialize(); 
    } 
    else { 
     alert("Nothing to remove."); 
     return false; 
    } 
}); 
</script>

來源

2013-07-25 04:42:33 richardj

不要使用<堆棧溢出的選項讓代碼學習 – 2013-07-25 05:03:00

使用JavaScript檢查所有複選框

回答

相關問題