使用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检查所有复选框

回答

相关问题