使用 JavaScript 检查所有复选框
[英]Check all checkboxes with 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>
6 个解决方案
解决方案1
6 已采纳 2012-02-29 03:18:38
这对我有用。
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>
解决方案2
1 2013-07-25 04:42:33
尝试这个...
<form id="form_">
<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>
$("#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>
解决方案3
1 2019-12-12 11:47:48
最好使用querySelectorAll 。 这是示例。
带有checkboxes的 Html
<input type="button" value="Select All" onclick="selectAll()" id="TestAll" />
<input type='checkbox' id='checkAll' name='Test1' />
<input type='checkbox' id='checkall' name='Test2' />
<input type='checkbox' id='checkAll' name='Test3' />
<input type='checkbox' id='checkAll' name='Test4' />
<input type='checkbox' id='checkAll' name='Test5' />
这是用于此的 javascript
function selectAll() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox')
checkboxes[i].checked = true;
}
}
解决方案4
1 2012-02-29 03:18:32
问题是您对所有复选框组使用相同的 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>
解决方案5
0 2012-02-29 03:17:21
ID 应该是唯一的 -永远不会有多个具有相同id HTML 元素，这是无效的。 这也是您遇到问题的原因 - 没有像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"更改为class="checkall" 。
或者你可以使用jQuery。 它很棒，可以做所有事情;)
解决方案6
0 2012-02-29 03:31:02
您可以简单地将所有您想要遍历的复选框包装到 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>
使用收音机和复选框进行JavaScript“全部检查”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.