0

クラス「checkAllAud」の5つの「すべて選択」ボタンの1つに変更が加えられたときに呼び出される次のJavascript関数があります。私は基本的に5つの縦の行を持ち、それぞれの下にチェック/チェックを外す必要がある数百のチェックボックスがあります。

私の現在のコードには、5つの列すべてですべて選択をクリックしたいときに問題があり、他のすべての列だけがすべてのチェックボックスを選択しています。私の質問は、すべての列とチェックボックスを選択する複数のインスタンスで機能するように、このコードをどのように書き直すことができるかということです。

var toggle = true;
    //on click function  here
    $(".checkAllAud").change(function() {
        var toggled = $(this).val();
                //alert('checkallaud function triggered');
                toggleBox(toggled);
            });
    //end on click function
    function toggleBox(toggled) {
        var objList = document.getElementsByName(toggled)
    //alert('toggleBox function triggered');
    for(i = 0; i < objList.length; i++)
        objList[i].checked = toggle;

    toggle = !toggle;
}

これが私のコードが現在どのように機能するかです

            column1   column 2   column 3   column 4   column 5
(select all) [x]        [x]         [x]        [x]        [x]
             [x]        [ ]         [x]        [ ]        [x]

JSFiddle: http://jsfiddle.net/8KQcp/8/

4

2 に答える 2

0

イベント ハンドラーを割り当てる前に、少し HTML を拡張することを検討してください。

この例のフィドルは次のとおりです。

ここでフィドルの例を参照してください

繰り返し可能な html 構造を反復するには、javascript が必要です。したがって、次のような html 構造があるとします: (フィドルを参照)

<table class="jsSelectAll">
    <tbody>
        <tr class="select-all">
            <td>Select All</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>
        <tr>
            <td>Row Label</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>
        <tr>
            <td>Row Label</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>
    </tbody>
    <tbody>
        <tr class="select-all">
            <td>Select All</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>
        <tr>
            <td>Row Label</td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>
    </tbody>
</table>

次に、必要に応じてテーブル内の各テーブルと tbody を分割し、行 (必要な場合) と列のポインターをチェックボックスに追加することを検討します。また、次のように、クロージャーを使用してイベントの配線を少し簡単にします。

jQuery(function ($) {
    // closures
    var $tables = $('table.jsSelectAll');

    $tables.each(function () {
        // closures
        var $table = $(this);
        var $tbodies = $table.find('tbody');

        $tbodies.each(function () {
            // closures
            var $tbody = $(this);
            var $rows = $tbody.find('tr');
            var $selectAllCheckboxes = $tbody.find('.select-all input[type="checkbox"]');
            var $allCheckboxes = $tbody.find('tr td input[type="checkbox"]')

            // label data cells with rows(if desired) and collumns
            $rows.each(function (rowIndex) {
                // closures
                var $row = $(this);
                var $inputs = $row.find('input[type="checkbox"]');

                $row.attr('data-row', rowIndex);
                $inputs.each(function (colIndex) {
                    // closures
                    $cbx = $(this);

                    $cbx.attr('data-col', colIndex);
                });
            });

            // wire select all for each select-all row checkbox
            $selectAllCheckboxes.each(function () {
                // closures
                var $cbx = $(this)
                var fClick = function () {
                    var iCol = $cbx.attr('data-col');
                    $allCheckboxes
                        .filter('[data-col="' + iCol + '"]')
                        .each(function () {
                            $(this).prop('checked', true);
                        });
                };
                $cbx.click(fClick);
            });

        });
    });
});
于 2014-03-03T23:49:24.113 に答える
0

グローバルを使用する必要はありません。変更した入力からチェック済みの状態を取得するだけです;-)

$(".checkAllAud").change(function() {
   var toggled = $(this).val();
   //alert('checkallaud function triggered');
   toggleBox(toggled, this.checked);
});

function toggleBox(toggled, checked) {
   var objList = document.getElementsByName(toggled)
   //alert('toggleBox function triggered');
   for(i = 0; i < objList.length; i++)
      objList[i].checked = checked;

}

動作中のjsFiddle : http://jsfiddle.net/8KQcp/9/

改善: http://jsbin.com/cakogulu/1/

$(".checkAllAud").change(function() {
   $('input[name^="' + this.value + '"]:checkbox').prop('checked', this.checked);
});
于 2014-03-03T23:33:28.737 に答える