javascript 通过javascript单击单个复选框时选择/取消选择所有复选框

select/deselect all check boxes on click a single check box by javascript

提问by Amy

I have a form in which I have two table with some rows .

我有一个表格，其中有两个带有一些行的表格。

I want that when I click on select/unselect allcheck box than checkboxes under the that check box should checked for that particular table

我希望当我点击选择/取消选择所有复选框时，而不是该复选框下的复选框应该为该特定表检查

I have a javascript function that works but when I click any of two select/unselect all checkboxthan both tables checkboxes are checked. I want to check all checkboxes for the particular table only.

我有一个 javascript 函数可以工作，但是当我单击两个选择/取消选择所有复选框中的任何一个时，两个表复选框都被选中。我只想检查特定表的所有复选框。

Javascript:

Javascript：

<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
    var aa= document.getElementById('frm1');
     if (checked == false)
          {
           checked = true
          }
        else
          {
          checked = false
          }
    for (var i =0; i < aa.elements.length; i++) 
    {
     aa.elements[i].checked = checked;
    }
      }

      //function for subscription month


</script>

my html is....

我的 html 是....

<form action="" method="post" name="frm1" id="frm1">

<table>
<tr><th>Cause List</th></tr>
<?php 
foreach($arr as $month)
{
?>
<tr><td><input type="checkbox" name="causelist_month" /><?php echo $month; ?></td></tr>
<?php } ?>
<tr><th><input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll (frm1);"/>select all/unselect all</th></tr>
</table>
<table>
<tr><th>Subscription</th></tr>
<?php 
foreach($arr as $month)
{
?>
<tr><td><input type="checkbox" name="subscription_month"/><?php echo $month; ?></td></tr>
<?php } ?>
<tr><th><input type="checkbox" name="subscription_month" id="subscription_month" onclick="checkedAll2 (frm2);"/>select all/unselect all</th></tr>
</table>
</form>

please help me.

请帮我。

回答by BadgerPriest

With jQuery 1.6+, you can do

使用 jQuery 1.6+，你可以做到

$('.check-all').click(function () {
    var checked = this.prop('checked');   
    this.closest('table').find(':checkbox').prop('checked', checked);
}

where check-allis a class that the two "select/unselect all"checkboxes have.

check-all两个“全选/取消全选”复选框所具有的类在哪里。

回答by Felix Kling

There are a couple of problems with your code. The most important one is that you are a a single checkedvariable to keep track of the state for bothforms. That cannot work. Instead, use the status of the "checkall" checkbox for the other checkboxes.

您的代码存在一些问题。最重要的是你是一个单一的检查变量来跟踪两种形式的状态。那行不通。相反，对其他复选框使用“checkall”复选框的状态。

Lets assume you really have two forms (if you cannot use two forms, see below):

让我们假设你真的有两种形式（如果你不能使用两种形式，见下文）：

<form action="" method="post" name="frm1" id="frm1">
    <table>    
        <tr><th>Cause List</th></tr>
        <!-- ... -->
        <tr>
            <th>
                <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll.call(this);"/>select all/unselect all
            </th>
        </tr>  
    </table>
</form>

<form action="" method="post" name="frm2" id="frm2">
    <table>    
        <tr><th>Subscription List</th></tr>
        <!-- ... -->
        <tr>
            <th>
                <input type="checkbox" name="subscription_month" id="subscription_month" onclick="checkedAll.call(this);"/>select all/unselect all
            </th>
        </tr>  
    </table>
</form>

Note that I changed the inline event handler to checkedAll.call(this).

请注意，我将内联事件处理程序更改为checkedAll.call(this).

Then your function should look like this:

那么你的函数应该是这样的：

function checkedAll() {
    // this refers to the clicked checkbox
    // find all checkboxes inside the checkbox' form
    var elements = this.form.getElementsByTagName('input');
    // iterate and change status
    for (var i = elements.length; i--; ) {
        if (elements[i].type == 'checkbox') {
            elements[i].checked = this.checked;
        }
    }
}

DEMO

演示

Of course there are ways to improve the code. For example you probably want to add the logic to deselect the respective "select all" checkbox when any if the other checkboxes in the table is deselected.

当然，有一些方法可以改进代码。例如，如果取消选择表中的其他复选框，您可能希望添加逻辑以取消选择相应的“全选”复选框。

I also recommend to read the great introduction to event handling on quirksmode.org, to learn about other ways of binding event handlers.

我还建议阅读quirksmode.org 上关于事件处理的精彩介绍，以了解绑定事件处理程序的其他方法。

---

---

If you cannot use two forms, you have to find another ancestor as reference point (i.e. from which you select all the checkboxes). In this case, the tableelement seems preferable. You have to traverse up the document, until you find it. The inline click event handler still has to be changed to checkedAll.call(this)for this to work:

如果不能使用两种形式，则必须找到另一个祖先作为参考点（即从中选择所有复选框）。在这种情况下，table元素似乎更可取。您必须向上遍历文档，直到找到它。内联点击事件处理程序仍然需要更改checkedAll.call(this)为使其工作：

function checkedAll() {
    // this refers to the clicked checkbox

    // find closest table
    var parent = this.parentNode;
    do {
        parent = parent.parentNode;
    } while(parent.nodeName !== 'TABLE');

    // find all checkboxes inside the checkbox' table
    var elements = parent.getElementsByTagName('input');

    // ... continue like shown above
}

回答by Pragnesh Chauhan

try this DEMO

试试这个演示

var checked=false;
function checkedAll () {
var aa =  document.getElementsByName("causelist_month");
checked = document.getElementById('causelist_month').checked;

for (var i =0; i < aa.length; i++) 
{
    aa[i].checked = checked;
}
}

function checkedAll2() {
var aa =  document.getElementsByName("subscription_month");
checked = document.getElementById('subscription_month').checked;


for (var i =0; i < aa.length; i++) 
{
    aa[i].checked = checked;
}
}

回答by xyz

You code is changing all checkbox which are inside frm1. Keep two tables inside two separate div's and pass corresponding divs id to checkedAllfunction .

您的代码正在更改里面的所有复选框frm1。将两个表放在两个单独的 div 中，并将相应的 div id 传递给checkedAllfunction 。

<form action="" method="post" name="frm1" id="frm1"> 
<div id="div1">
<table>  
   <tr>
         <th>Cause List</th>
  </tr>
  <?php foreach($arr as $month) { ?> 
   <tr><td><input type="checkbox" name="causelist_month" />
   <?php echo $month; ?></td></tr> 
   <?php } ?> 
   <tr>
   <th>
    <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll (div1);"/>select all/unselect all</th></tr> </table>  
   </div>
   <div id="div2">
   // Second table
   </div>  
  </form>

回答by Ishan Jain

Try this --

试试这个 -

$(input[type=checkbox]').attr('checked', 'checked');

HTML -

HTML -

<div><label><input id="ChkAll" type="checkbox" onchange="javascript:CheckedAll();" /><span>SelectAll</span></label></div> 
 <div id="DivChk ">
    <label><input type="checkbox" /><span>First</span></label>
    <label><input type="checkbox" /><span>2nd</span></label>
    <label><input type="checkbox" /><span>3rd</span></label>
    <label><input type="checkbox" /><span>4th</span></label>
</div>

My Jquery -

我的jQuery -

function CheckedAll(){
     if ($('#ChkAll').is(':checked')) {
          $('#DivChk input[type=checkbox]').attr('checked', 'checked');           
     }
     else {
          $('#DivChk input[type=checkbox]:checked').removeAttr('checked');
     }
   }

Try This using Jquery

使用 Jquery 试试这个

BY Javascript -

通过 Javascript -

function CheckedAll(){    
     if (document.getElementById('ChkAll').checked) {
         for(i=0; i<document.getElementsByTagName('input').length;i++){
         document.getElementsByTagName('input')[i].checked = true;
         }
     }
     else {
         for(i=0; i<document.getElementsByTagName('input').length;i++){
          document.getElementsByTagName('input')[i].checked = false;
         }
     }
   }

Try This

试试这个

回答by nrsharma

Try this

试试这个

function checkedAll(frm1) {
  var chk = document.getElementsByTagName('input');
  for(var i=0; i < chk.length; i++) {
    if(chk[i].type == 'checkbox') {
      chk[i].checked = frm1.checked;
    }
  }
}

or you can find more details here.

或者您可以在此处找到更多详细信息。