-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

};

必須:
マスターが選択されている場合はすべての子が選択され、マスターが選択解除されたらすべての子が選択解除され、子チェックボックスのいずれかが選択解除された場合はマスターが選択解除され、すべての子が選択された場合も同様に機能する必要があります。自動的に選択されます

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 ソリューション:
編集
: jquery ソリューション フィドルを受け入れた元の質問: 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;
}

ここで、これら 2 つの関数をイベントに追加する必要があります。私はインラインイベントを使用することを選択し、次のように行います：

  1. onclick呼び出すコールバックを追加checkUncheck()する#SelectAllCheckBox

  2. onclickコールバックを追加しuncheckて、他のすべてのチェックボックスを呼び出します

目立たない JavaScriptを使用して、EventHandlers を追加して同じことを行うことができます。

これが動作していることを示す Jsfiddle です。

それが役に立てば幸い

PS: 参考までに、私はquerySelector/querySelectorAllAPI を使用してノードをよりクリーンにし、最新のすべてのブラウザーで十分にサポートされています。レガシーブラウザであるIE6 / IE7では機能しません。

于 2013-06-30T08:29:40.540 に答える