如何检查多个复选框与jquery没有给每个id？ [英] How do I check multiple checkboxes with jquery without giving each an id?

问题描述

我想使用一个jQuery检查多个复选框。我知道如何做到这一点，检查所有复选框或检查多个，如果他们有id。我想要能够做到这一点，虽然。

我的所有复选框都在类似的分组中。

我有我的工作在一个小提琴

以下是我的代码

  window.onCheck = function（）{
 var totals = [0，0，0]; 
 $（'tr.checkRow'）。each（function（）{
 var $ row = $（this）; 
 if（$ row.children（'td：first'）。 find（'input：checkbox'）。prop（'checked'））{
 $（this）.find（'td.imageBox'）each（function（index）{
 var $ imageBox = $（this）; 
 if（$ imageBox.children（'img：first'）。attr（'src'）。indexOf（'yes'）> = 0）{
 ++ [index]）; 
} 
}）; 
} 
}）; 
 
 $（'＃total1'）。text（totals [0]）; 
 $（'＃total2'）。text（totals [1]）; 
 $（'＃total3'）。text（totals [2]）; 
}; 
 window.onCheckForm = function（cb）{
 var $ cb = $（cb）; 
 var $ table = $ cb.parents（table）; 
 $（'input.subFieldCheck'）。find（$ table）.prop（'checked'，function（）{return cb.prop（'checked'）} 
 
} 
  

我的问题是onCheckForm函数。

谢谢。

解决方案

注意：我开始为这个问题的重复，意识到我不能发布这个，所以我把它发布在这里。

让我们从一个非常简单的表格中选择一个复选框：

 < table> 
< thead> 
< tr> 
< th scope ='col'id ='toggler'> 
< input type ='checkbox'id ='toggleAll'> 
< label for ='toggleAll'>全选< / label> 
< / th> 
< th scope ='col'> A列< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td headers ='toggler'> 
< input type ='checkbox'> 
< / td> 
< td>一些单元格数据< / td> 
< / tr> 
< tr> 
< td headers ='toggler'> 
< input type ='checkbox'> 
< / td> 
< td>一些单元格数据< / td> 
< / tr> 
< tr> 
< td headers ='toggler'> 
< input type ='checkbox'> 
< / td> 
< td>一些单元格数据< / td> 
< / tr> 
< tr> 
< td headers ='toggler'> 
< input type ='checkbox'> 
< / td> 
< td>一些单元格数据< / td> 
< / tr> 
< tr> 
< td headers ='toggler'> 
< input type ='checkbox'> 
< / td> 
< td>一些单元格数据< / td> 
< / tr> 
< / tbody> 
< / table> 
  

这里，我在标题中有一个复选框，

我还给标题单元格一个ID，并使用 headers 属性元素。 td 这不是我们正在做的绝对必要的，但是它似乎是一个适当的情况使用 headers 属性。如果你想将复选框移动到另一列的某些行，你可以只是添加 headers 属性到该单元格。

这里是一些JavaScript代码：

  $（'＃toggleAll'）。change（function（）{
 $（'td [headers〜=toggler]> input [type =checkbox]'）。prop（'checked'，$（this）.prop（'checked'））; 
 }）; 
  

我们将一个函数绑定到 change

选择器将查找 td 元素的所有复选框在头属性中以空格分隔的令牌列表中包含ID toggler 。

.prop（）方法设置复选框的 checked 属性，以匹配

我们的基本功能是完成的。

我们可以通过更改顶部复选框的状态来匹配行中复选框的状态来改进。

标题复选框的状态应为：

• 如果选中0则取消选中


• 检查是否检查（0， n ）


• 检查 code>



其中 n 表示所有复选框。

为此，我们将一个函数绑定到表行中每个框的 change 事件：

  $（'td [headers〜=toggler]&输入[type =checkbox]'）。change（function（）{
 var allChecked = true，noneChecked = true; 
 var headerCheckbox = $（'＃toggleAll'）; 
 $每个（function（i，domElement）{
 if（domElement.checked）{$ b（b））; b $ b $（'td [headers〜=toggler]> input [type =checkbox $ b //至少选中一个
 noneChecked = false; 
} else {
 //至少一个未选中
 allChecked = false; 
} 
}）; 
 
 if（allChecked）{
 headerCheckbox.prop（'checked'，true）; 
 headerCheckbox.prop（'indeterminate'，false）; 
} else if（noneChecked）{
 headerCheckbox.prop（'checked'，false）; 
 headerCheckbox.prop（'indeterminate'，false）; 
} else {
 headerCheckbox.prop（'indeterminate'，true）; 
} 
}）; 
  

我使用 .each（）这里循环遍历所有相应的复选框，以确定是否检查所有，无或一些。

请参阅 jsFiddle demo 。

希望这有帮助，我肯定在回答问题时学到了很多！ >

I am trying to check multiple checkboxes using one with jQuery. I know how to do this to check all checkboxes or to check multiple if they have ids. I want to be able to do this without that though.

All of my checkboxes are in a similar grouping. I have them grouped in a consistant way.

I have my work on a fiddle here.

Here is my code

window.onCheck = function () {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
    var $row = $(this);
    if ($row.children('td:first').find('input:checkbox').prop('checked')) {
        $(this).find('td.imageBox').each(function (index) {
            var $imageBox = $(this);
            if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
                ++(totals[index]);
            }
        });
    }
});

$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
};
window.onCheckForm = function (cb) {
var $cb = $(cb);
var $table = $cb.parents("table");
$('input.subFieldCheck').find($table).prop('checked', function () { return cb.prop('checked')});

}

My problem is with the onCheckForm function.

Thank you.

解决方案

Note: I started writing this answer for a duplicate of this question and realized I couldn't post this, so I posted it here instead. The table structure is different and a lot simplified in this answer.

Lets start off with a very simple table with a checkbox column:

<table>
    <thead>
        <tr>
            <th scope='col' id='toggler'>
                <input type='checkbox' id='toggleAll'>
                <label for='toggleAll'>Select all</label>
            </th>
            <th scope='col'>A column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
    </tbody>
</table>

Here, I have a checkbox in the header along with a label for accessibility purposes (you may hide the label if you wish).

I've also given the header cell an ID and used the headers attribute for the td elements. This isn't absolutely necessary for what we're doing, however it seems like an appropriate case to use the headers attribute. If you ever want to move the checkbox to another column for certain rows, you can just add the headers attribute to that cell.

Here is some JavaScript code:

$('#toggleAll').change(function () {
    $('td[headers~="toggler"] >  input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

We are binding a function to the change event to the checkbox in the header.

The selector will look for all checkboxes that are children of td elements that contain the ID toggler in a space-separated list of tokens in the headers attribute.

The .prop() method sets the checked property of the checkboxes to match the value of the checked property of the one in the header ("this").

Our basic functionality is done here.

We can make improvements though, by changing the state of the checkbox at the top to match the state of the checkboxes in the rows.

The state of the header checkbox should be:

• Unchecked if 0 are checked
• Interdetermine if (0, n) are checked
• Checked if n are checked

Where n indicates all the checkboxes.

To do this, we bind a function to the change event of each of the boxes in the table rows:

$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
    var allChecked = true, noneChecked = true;
    var headerCheckbox = $('#toggleAll');

    $('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
        if(domElement.checked) {
            // at least one is checked
            noneChecked = false;
        } else {
            // at least one is unchecked
            allChecked = false;
        }
    });

    if(allChecked) {
        headerCheckbox.prop('checked', true);
        headerCheckbox.prop('indeterminate', false);
    } else if (noneChecked) {
        headerCheckbox.prop('checked', false);
        headerCheckbox.prop('indeterminate', false);
    } else {
        headerCheckbox.prop('indeterminate', true);
    }
});

I'm using .each() here to loop through all of the appropriate checkboxes to determine whether all, none, or some are checked.

See the jsFiddle demo.

Hope this helps, I sure learned quite a bit while answering the question!

这篇关于如何检查多个复选框与jquery没有给每个id？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！