Question

我在页面上有一个“全选”复选框，将取消选中并选择以下复选框。

<div class="field">
    <div class="SelectAllCheckBox">
        <input type="checkbox" id="SelectAllCheckBox" />
        <label for="SelectAllCheckBox">Select All</label>
    </div>
</div>

<div id="TargetsPanel" class="panel" style="display: block;">
    <div class="body stack-calc">
        <table id="TargetsTable" class="tm-list" cellspacing="0">
            <colgroup>
                <col width="20px">
                <col width="20%">
                <col>
            </colgroup>
            <thead>
                <tr>
                <th></th>
                <th> Language </th>
                <th> Workflow </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td>
                        <span class="LanguageName">Arabic</span>
                        <ul class="Publications">
                            <li>
                                <img alt="" src="/test/tt.png">
                                <input type="checkbox" id="tcm:0-235-1" name="tcm:0-235-1" checked="checked">                               
                                <label for="tcm:0-235-1">Test Arabic</label>
                            </li>
                        </ul>
                    </td>
                    <td><select name="_1041" disabled=""><option value="1650">Test</option></select></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <span class="LanguageName">Test Chinese (HongKong)</span>
                        <ul class="Publications">
                            <li>
                                <img alt="" src="/test/mm.png">
                                <input type="checkbox" id="tcm:0-368-1" name="tcm:0-368-1" checked="checked">                               
                                <label for="tcm:0-368-1">Test (Traditional Chinese)</label>
                            </li>
                        </ul>
                    </td>
                    <td><select name="_1116" disabled=""><option value="1650">Test2</option></select></td>
                </tr>
                ...
                ...
                ...//It goes on for other checkboxes.
                ...
                ...
            </tbody>
        </table>
    </div>
</div>

现在，我想要在“SelectAllCheckBox”复选框中选择和取消选择功能，以下面的所有复选框。复选框中没有什么常见的用于执行映射，除了它们是复选框，我希望这些复选框只有其他将超出限制。

<input type="checkbox" id="tcm:0-235-1" name="tcm:0-235-1" checked="checked">
<input type="checkbox" id="tcm:0-368-1" name="tcm:0-368-1" checked="checked">
....
....
....

由于

编辑：

c.SelectAllCheckBox = $("#SelectAllCheckBox"); //I am initializing the existing checkbox id

$evt.addEventHandler(c.SelectAllCheckBox, "click", this.getDelegate(this._onSelectAllCheckBoxClick)); //Here I am adding the event listner

TranslationJob.prototype._onSelectAllCheckBoxClick = function TranslationJob$_onSelectAllCheckBoxClick(headDoc, items)
{
    var p = this.properties;
    var c = p.controls;

    //Here I want code which will deselect and select the checkboxes

};

必需：
功能应该在选择master时应该工作，所有子项都应该被选中，一旦取消选择master，所有子项都应该被取消选择，如果取消选择任何子复选框，则取消选择master，如果所有子项都被选中，则也应该选择master自动

Answer 1

试试这个：

$(document).on('click', '#SelectAllCheckBox', function(){
  $('.Publications input[type=checkbox]').toggle(this.checked);
});

一旦您点击Select All checkox＆amp;，它会检查所有class=Publications的复选框。如果您取消支票，也取消选中它们。

此外，您可以自定义$('.Publications input[type=checkbox]')选择器以更改选中/取消选中的复选框

<强> [编辑]

纯JavaScript 解决方案，请参阅my other answer

Answer 2

jquery解决方案：
编辑：原始问题接受了jquery解决方案
小提琴：http://jsfiddle.net/WF74Y/3/

$('#SelectAllCheckBox').change(function () {
    $('div#TargetsPanel table#TargetsTable tr input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

Answer 3

纯javascript解决方案:)
小提琴：http://jsfiddle.net/6sxxZ/6/

function get_checkboxes() {
    var cboxes = [];
    var tbl = document.getElementById('TargetsTable');
    var tbody = tbl.getElementsByTagName('tbody')[0];
    var trs = tbody.getElementsByTagName('tr');
    var cbox;
    for (var i = 0; i < trs.length; i++) {
        cboxes.push(cbox = trs[i].getElementsByTagName('input')[0]);
    }
    return cboxes;
}

var _cboxes = get_checkboxes();
for (var i = 0; i < _cboxes.length; i++) {
    _cboxes[i].onchange = function () {

        var __cboxes = get_checkboxes();
        var all_checked = true;
        for (var j = 0; j < __cboxes.length; j++) {

            if (!__cboxes[j].checked) {
                all_checked = false;
                break;
            }
        }

        document.getElementById('SelectAllCheckBox').checked = all_checked;
    }
};

document.getElementById('SelectAllCheckBox').onchange = function () {
    var cboxes = get_checkboxes();
    for (var i = 0; i < cboxes.length; i++) {
        cboxes[i].checked = this.checked;
    }
};

Answer 4

纯粹的JavaScript解决方案

var selectAll = document.querySelector('#SelectAllCheckBox');

function checkUncheck() {
    var checkboxes = document.querySelectorAll('.Publications input[type=checkbox]');
    for (var checkbox in checkboxes) {
        if (!checkboxes.hasOwnProperty(checkbox)) continue;
        if (selectAll.checked) {
            checkboxes[checkbox].checked = true;
        } else {
            checkboxes[checkbox].checked = false;
        }
    }
}

function uncheck(){
    selectAll.checked = false;
}

现在，我们需要将这两个函数添加到事件中。我选择使用内联活动＆amp;以这种方式完成：

添加onclick回调以致电checkUncheck()至#SelectAllCheckBox
添加onclick回调以致电uncheck所有其他复选框

您可以使用unobtrusive javascript＆amp;添加EventHandlers来做同样的事情。

这是Jsfiddle在工作中展示它：

jsfille demo

希望有所帮助

PS：仅供参考，我使用了querySelector/querySelectorAll API导致更清洁的节点＆amp;所有现代浏览器都很好地支持。它只适用于IE6 / IE7，它们是传统的浏览器。

复选框在javascript中选择和取消选择功能

4 个答案: