-2

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

<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 应相同被自动选中

4

4 回答 4

2

尝试这个：

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

class=Publications一旦您单击全选复选框，它将检查所有复选框，如果您删除检查，也取消选中它们。

此外，您可以根据$('.Publications input[type=checkbox]')自己的意愿自定义选择器以更改选中/未选中的复选框

[编辑]

对于纯 JavaScript解决方案，请参阅我的其他答案

于 2013-06-30T07:01:13.250 回答
0

jquery solution:
edit: original question accepted a jquery solution
fiddle:http://jsfiddle.net/WF74Y/3/

$('#SelectAllCheckBox').change(function () {
    $('div#TargetsPanel table#TargetsTable tr input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});
于 2013-06-30T06:57:10.183 回答
0

纯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;
    }
};
于 2013-06-30T07:35:02.440 回答
0

纯 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;
}

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

  1. 添加要调用的onclick回调checkUncheck()#SelectAllCheckBox

  2. 添加onclick回调以调用uncheck所有其他复选框

您可以使用不显眼的 javascript并添加 EventHandlers 来做同样的事情。

这是 Jsfiddle 在工作中展示它：

希望能帮助到你

PS：仅供参考，我使用querySelector/querySelectorAllAPI 导致节点更干净，并且在所有现代浏览器中都得到很好的支持。它只是不适用于旧版浏览器 IE6/IE7。

于 2013-06-30T08:29:40.540 回答