Fatal编程技术网
  • javascript/
  • 使用JavaScript选中所有复选框

使用JavaScript选中所有复选框

javascript checkbox

使用JavaScript选中所有复选框,javascript,checkbox,Javascript,Checkbox,我想有第一个复选框，允许我选中或取消选中所有其他框。以下是我正在使用的代码： <html> <head> <script language="JavaScript"> function toggle(source) { checkboxes = document.getElementsById('checkall'); for(var i in checkboxes) checkboxes[i].checked = source.check

我想有第一个复选框，允许我选中或取消选中所有其他框。以下是我正在使用的代码：

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


函数切换（源）{
复选框=document.getElementsById（'checkall'）；
用于（复选框中的var i）
复选框[i]。选中=源。选中；
}
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。它很棒，无所不能；）

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。它很棒，无所不能；）

问题是您对所有复选框组使用相同的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>


函数切换（源）{
//获取所有输入元素
var inputs=document.getElementsByTagName（'input'）；
//循环输入以查找名称以“orders”开头的复选框`

对于（var i=0；i，问题是您对所有复选框组使用相同的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>




函数切换（源）{
//获取所有输入元素
var inputs=document.getElementsByTagName（'input'）；
//循环输入以查找名称以“orders”开头的复选框`

对于（var i=0；i而言，这对我有效


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



功能切换（oInput）{
var aInputs=document.getElementsByTagName（'input'）；

对于（var i=0；i而言，这对我有效


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



功能切换（oInput）{
var aInputs=document.getElementsByTagName（'input'）；

对于（var i=0；i您可以简单地将所有需要写入的复选框包装到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> 




函数切换（源）{
//使用getElementById按ID访问DOM对象
var checkbox=document.getElementById（'checkall'）.childNodes；
var source=document.getElementById（'source'）；
//现在只需输入“checkall”DIV中的所有复选框
用于（复选框中的var i）{
复选框[i]。选中=源。选中；
}
} 













您只需将所有需要写入DIV的复选框包装到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> 




函数切换（源）{
//使用getElementById按ID访问DOM对象
var checkbox=document.getElementById（'checkall'）.childNodes；
var source=document.getElementById（'source'）；
//现在只需输入“checkall”DIV中的所有复选框
用于（复选框中的var i）{
复选框[i]。选中=源。选中；
}
} 













试试这个


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





移除
$（“#选择所有1”）。单击（函数（）{
var item=document.getElementsByName（“item1”）；
对于（变量i=0；i
试试这个


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





移除
$（“#选择所有1”）。单击（函数（）{
var item=document.getElementsByName（“item1”）；
对于（变量i=0；i
最好使用
查询选择器all

带有
复选框的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;
     }
 }



函数selectAll（）{
var checkbox=document.querySelectorAll（'input[type=“checkbox”]”）；
对于（变量i=0；i