Javascript或Jquery检查并取消选中所有复选框 [英] Javascript or Jquery to check and uncheck all checkbox

问题描述

我有一个包含复选框列表的表单。我想创建一个checkAll和UncheckAll框以获得更好的用户体验。我尝试了很多从Internet获得的代码，但没有一个能够工作。你能帮我看看，告诉我是什么问题。谢谢

I have a form with a list of checkboxs. I want to create a checkAll and UncheckAll boxes for better user experience. I tried a lot of code that I got from Internet, but none of them worked. Can you help me to take a look and tell me what is the problem. thanks

<script type="text/javascript">
  function checkAll(field)
  {
  for (i = 0; i < field.length; i++)
    field[i].checked = true ;
  }

  function uncheckAll(field)
  {
  for (i = 0; i < field.length; i++)
    field[i].checked = false ;
  }
</script>


<style type="text/css">
  #user_info {
    border-collapse:collapse;
  }

  #user_info td, #user_info th {
    width:100px;
    border:1px solid #CACACA;
    padding:5px;  
  }

  #checkbox{
    padding:20px 0 20px 250px;
  }
</style>

<p>Please choose all the users whose group_id you want to replace with that of the uploaded file</p>

<form id="groupImportForm" action="<?php echo url_for('group_utilization/importGroupMarching') ?>" method="POST">
<table id="user_info">
  <thead>
    <th>User ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Date_Of_Birth</th>
    <th>Old Group_ID</th>
    <th>New Group_ID</th>
    <th>Update GroupID</th>
  </thead>
  <tbody>
    <?php foreach($userGroupData as $value): ?>
    <tr>
      <td><?php echo $value['user_id']; ?></td>
      <td><?php echo $value['last_name']; ?></td>
      <td><?php echo $value['first_name']; ?></td>
      <td><?php echo $value['date_of_birth']; ?></td>
      <td><?php echo $value['group_id_old']; ?></td>
      <td><?php echo !empty($value['group_id_new']) ? $value['group_id_new'] : ''; ?></td>
      <td><input type="checkbox" name="isReplaceGroupID[<?php echo $value['user_id']; ?>]" value="<?php echo $value['group_id_new']; ?>"></input></td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>
  <div id="checkbox">
    <input type="button" name="CheckAll" value="Check All"
    onClick="checkAll(document.myform.list)">
    <input type="button" name="UnCheckAll" value="Uncheck All"
    onClick="uncheckAll(document.myform.list)">

  </div>
  <div><input type="submit" value="Continue" /></div>
</form>
<br/>
<br/>

推荐答案

我生活在jQuery上，所以我抓住了一些来自这里不使用jQuery更新您的代码：
http：//www.coderanch .com / t / 120677 / HTML-CSS-JavaScript / find-Checkboxes

I live on jQuery, so I grabbed some code from here to update your code without using jQuery: http://www.coderanch.com/t/120677/HTML-CSS-JavaScript/find-Checkboxes

这是一个有效的解决方案：
http://jsfiddle.net/nvAtF/1/

Here's a working solution: http://jsfiddle.net/nvAtF/1/

这是与jQuery相同的解决方案：
http://jsfiddle.net/nvAtF/2/

Here's the same solution with jQuery: http://jsfiddle.net/nvAtF/2/

这是代码块：

function toggleCheckboxes(flag) {    
    var form = document.getElementById('groupImportForm');
    var inputs = form.elements;
    if(!inputs){
        //console.log("no inputs found");
        return;
    }
    if(!inputs.length){
        //console.log("only one elements, forcing into an array");
        inputs = new Array(inputs);        
    }

    for (var i = 0; i < inputs.length; i++) {  
      //console.log("checking input");
      if (inputs[i].type == "checkbox") {  
        inputs[i].checked = flag;
      }  
    }  
}

这篇关于Javascript或Jquery检查并取消选中所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！