0

したがって、曜日ごとにすべてのチェックボックスをオフ/オンにするために使用する一連のボタンがありますが、現時点では非常に面倒に見えるので、すべてのボタンをドロップダウン選択フィールドに変更して、たとえば、月曜日にオプションを指定すると、月曜日の jquery が実行され、月曜日のチェック ボックスがすべて非表示になります。

ここにhtmlがあります

<input type='submit' name='submit_performances' value='update all'>
    <input type='button' id='select-all-toggle' name='select-all-toggle' value='Hide/Show all Performances'>
    <input type='button' id='select-all-toggle-monday' name='select-all-toggle-monday' value='Hide/Show all Monday Performances'>
    <input type='button' id='select-all-toggle-tuesday' name='select-all-toggle-tuesday' value='Hide/Show all Tuesday Performances'>
    <input type='button' id='select-all-toggle-wednesday' name='select-all-toggle-wednesday' value='Hide/Show all Wednesday Performances'>
    <input type='button' id='select-all-toggle-thursday' name='select-all-toggle-thursday' value='Hide/Show all Thursday Performances'>
    <input type='button' id='select-all-toggle-friday' name='select-all-toggle-friday' value='Hide/Show all Friday Performances'>
    <input type='button' id='select-all-toggle-saturday' name='select-all-toggle-saturday' value='Hide/Show all Saturday Performances'>
    <input type='button' id='select-all-toggle-sunday' name='select-all-toggle-sunday' value='Hide/Show all Sunday Performances'>
    </form>

ここにjQueryがあります

<script>
$(document).ready(function() {
    $('#select-all-toggle').toggle(
        function() {
            $('.select-all-identifier').prop('checked', true);
        },
        function() {
            $('.select-all-identifier').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-monday').toggle(
        function() {
            $('.monday').prop('checked', true);
        },
        function() {
            $('.monday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-tuesday').toggle(
        function() {
            $('.tuesday').prop('checked', true);
        },
        function() {
            $('.tuesday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-wednesday').toggle(
        function() {
            $('.wednesday').prop('checked', true);
        },
        function() {
            $('.wednesday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-thursday').toggle(
        function() {
            $('.thursday').prop('checked', true);
        },
        function() {
            $('.thursday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-friday').toggle(
        function() {
            $('.friday').prop('checked', true);
        },
        function() {
            $('.friday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-saturday').toggle(
        function() {
            $('.saturday').prop('checked', true);
        },
        function() {
            $('.saturday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-sunday').toggle(
        function() {
            $('.sunday').prop('checked', true);
        },
        function() {
            $('.sunday').prop('checked', false);
        }
    );
});
</script>

どんな助けでも大歓迎です。

ありがとう、

4

1 に答える 1

1

ドキュメントをチェック中！jquery ドキュメントには、まさにこれを処理するイベントがあります。ページは次のとおりです。

http://api.jquery.com/change/

少し下にスクロールすると、選択ボックスでどのように機能するかを示すインタラクティブな例があることがわかります。私が間違っていなければ、まさにあなたが求めているものです。

また、コード例に基づいたいくつかの一般的な JavaScript のヒント:

  1. 上記のコメントで誰かが述べたように、準備ができているドキュメントは 1 つだけで、すべてのコードをその 1 つの関数内に配置できます。

  2. 繰り返さないでください！セレクター文字列を解析することで、これらの個別のメソッドをすべて 1 つのメソッドに変換できます。各ボタンに 1 つの ID ではなく 2 つのクラスを配置すると、ここでほとんどのコードを効果的にカットできます。最初のクラスは でselect-all-toggle、2 番目のクラスは曜日です。次に、セレクターを使用して任意の要素でトグル イベントと変更イベントを実行し、.select-all-togglejquery を使用$(el).attr('class')して 2 番目のクラスを取得し、その日の値を取得できます。

私は間違いなくあなたのためにここでより明確な答えを書くことができましたが、それは学習に資するとは思いません. ここでの提案を読んで、コードを修正してみてください - 私があなたに答えを与えるだけでなくても、あなたはこれを機能させることができると思います:)

于 2013-03-20T17:13:46.407 に答える