选择/取消选中所有复选框，单击一个复选框通过javascript [英] select/deselect all check boxes on click a single check box by javascript

问题描述

我有一个表格，我有两个表有一些行。

I想要当我点击选择/取消选择所有复选框，而复选框下方的复选框应该检查该特定表格

我有一个JavaScript功能有效，但是当我点击任何两个选择/取消选中所有复选框时，两个表格复选框都被选中。
我想检查特定表格的所有复选框。

Javascript：

 < script type =text / javascript> 
 checked = false; 
函数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; 
} 
} 
 
 //订阅月份的功能
 
 
< / script> 
  

我的html是....

 < form action =method =postname =frm1id =frm1> 
 
< table> 
< tr>< th>原因列表< / th>< / tr> 
<？php 
 foreach（$ arr as $ month）
 {
？> 
< tr>< td>< input type =checkboxname =causelist_month/><？php echo $ month; ？>< / TD>< / TR> 
<？php}？> 
< tr>< th>< input type =checkboxname =causelist_monthid =causelist_monthonclick =checkedAll（frm1）;/> select all / unselect all& ;< / TR> 
< / table> 
< table> 
< tr>< th>订阅< / th>< / tr> 
<？php 
 foreach（$ arr as $ month）
 {
？> 
< tr>< td>< input type =checkboxname =subscription_month/><？php echo $ month; ？>< / TD>< / TR> 
<？php}？> 
< tr>< input type =checkboxname =subscription_monthid =subscription_monthonclick =checkedAll2（frm2）;/> select all / unselect all< / th& ;< / TR> 
< / table> 
< / form> 
  

请帮助我。

解决方案

您的代码有几个问题。最重要的是，您是一个单独的选中的变量，用于跟踪 两种形式的状态。这不行。相反，使用其他复选框的checkall复选框的状态。

假设您确实有两种表单（如果您不能使用两种表单，请参阅下文）：

 < form action =method =postname =frm1id =frm1> 
< table> 
< tr>< th>原因列表< / th>< / tr> 
<！ -  ...  - > 
< tr> 
< th> 
< input type =checkboxname =causelist_monthid =causelist_monthonclick =checkedAll.call（this）;/> select all / unselect all 
< / th& 
< / tr> 
< / table> 
< / form> 
 
< form action =method =postname =frm2id =frm2> 
< table> 
< tr>< th>订阅列表< / th>< / tr> 
<！ -  ...  - > 
< tr> 
< th> 
< input type =checkboxname =subscription_monthid =subscription_monthonclick =checkedAll.call（this）;/> select all / unselect all 
< / th& 
< / tr> 
< / table> 
< / form> 
  

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

然后你的函数应该如下所示：

 code> function checkedAll（）{
 //这是指点击的复选框
 //找到复选框'form 
 var elements = this.form.getElementsByTagName（'输入'）; 
 //迭代并更改状态
 for（var i = elements.length; i--;）{
 if（elements [i] .type =='checkbox'）{
 elements [i] .checked = this.checked; 
} 
} 
} 
  

演示

当然有办法改进代码。例如，如果表中的其他复选框被取消选择，您可能需要添加逻辑以取消选择相应的全选复选框。

我还建议您阅读伟大的简介对于quirksmode.org上的事件处理，了解其他绑定事件处理程序的方法。

---

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

  function checkedAll（）{
 //这是指点击的复选框
 
 //查找最近的表
 var parent = this.parentNode; 
 do {
 parent = parent.parentNode; 
} while（parent.nodeName！=='TABLE'）; 
 
 //找到'table 
 var elements = parent.getElementsByTagName（'input'）中的所有复选框; 
 
 // ...继续如上所示
} 
  

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

I want that when I click on select/unselect all check 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 checkbox than both tables checkboxes are checked. I want to check all checkboxes for the particular table only.

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

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

解决方案

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

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

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.

---

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 table element 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:

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
}

这篇关于选择/取消选中所有复选框，单击一个复选框通过javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！