0

それぞれが関連する「すべて」オプションを持つ複数のチェックボックスグループを持つフォームがあり、クリックすると関連するすべてのチェックボックスが選択解除されます。関連するチェックボックスのいずれかがチェックされている場合、フォームは「すべて」オプションのチェックを外す必要もあります。基本的に、フォームは「すべて」オプション、関連オプションのいずれか、またはオプションなしのいずれかを送信できます。

いずれかのチェックボックスをオンにすると、「すべて」オプションを含め、関連するラベルが太字になります。

このロジックをjQueryで記述しましたが、関連するオプションの1つがチェックされているときに「すべて」オプションの選択を解除すると、1つの部分が正しく機能しないようです。ユーザーが関連するオプションのいずれかをクリックすると機能しますが、チェックしたばかりの「すべて」オプションもチェック解除します。

私の質問は、「ソース」イベントが何であったかをどのように判断できるので、そのコードの一部を実行するかどうかを判断できるかということだと思います。

「「すべて」の選択を解除」したデモはコメントアウトされています: http://jsfiddle.net/8Ctvd/

JS:

$(function () {
    $(".all").change(function () {
        if ($(this).is(":checked")) $("input[rel='" + $(this).attr("rel") + "']:checked").not(".all").removeAttr("checked").change();
    });

    $("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) $("label[for='" + $(this).attr("id") + "']").css("font-weight", "bold");
        else {
            $("label[for='" + $(this).attr("id") + "']").css("font-weight", "normal");
            /* THIS UNCHECKS THE ALL EVERYTIME
            if  ($(this).not(".all"))
                $("input.all[rel='" + $(this).attr("rel") + "']").removeAttr('checked').change();
            */
        }
    });
});

HTML:

<INPUT id=items_All class="checkbox all" name=items value=ALL type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_All>All</LABEL>
<INPUT id=items_1 class=checkbox name=items value=1 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_1>Item 1</LABEL>
<INPUT id=items_2 class=checkbox name=items value=2 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_2>Item 2</LABEL>
<INPUT id=items_3 class=checkbox name=items value=3 type=checkbox rel="items">
<LABEL class="items checkbox-label" for=items_3>Item 3</LABEL>
<br />
<INPUT id=widgets_All class="checkbox all" name=widgets value=ALL type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_All>All</LABEL>
<INPUT id=widgets_1 class=checkbox name=widgets value=1 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_1>Widget 1</LABEL>
<INPUT id=widgets_2 class=checkbox name=widgets value=2 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_2>Widget 2</LABEL>
<INPUT id=widgets_3 class=checkbox name=widgets value=3 type=checkbox rel="widgets">
<LABEL class="widgets checkbox-label" for=widgets_3>Widget 3</LABEL>
4

2 に答える 2

0

関連するチェックボックスの「クリック」イベントを使用して、これを理解しました。そうすれば、変更イベントはそれをトリガーしません。

JS:

$('.all').change(function(){
    if ($(this).is(':checked'))
        $('input[rel="' + $(this).prop('rel') + '"]:checked').not('.all').removeProp('checked').change();
});

$('input[type="checkbox"]').change(function(e){
    var $label = $('label[for="' + $(this).prop('id') + '"]');

    if ($(this).is(':checked'))
        $label.css('font-weight', 'bold');
    else
        $label.css('font-weight', 'normal');
});

$('input[type="checkbox"]').not('.all').click(function(e){
    var $allCheckbox =
        $('input.all[rel="' + $(this).prop('rel') + '"]');

    if ($allCheckbox.is(':checked'))
        $allCheckbox.removeProp('checked').change();
});
于 2013-04-10T17:56:17.953 に答える
0

編集

誤解していた要件に合わせて JS を微調整しました。問題の一部は、ロジックが少しずれていて、大幅に単純化できる可能性があることでした。書式設定ロジックを別の関数に分離すると、書式設定をチェックとは別に見ることができます。

$("input[type='checkbox']").change(function (e) {
    var $o = $(this);
    if ($o.hasClass("all")) {
        //all box was checked, uncheck others
        if ($o.prop("checked"))
            $("input[rel='" + $o.attr("rel") + "']").not(this).prop("checked", false);
    } else {
        // other box was checked, uncheck all
        if ($o.prop("checked")) {
            $("input.all[rel='" + $o.attr("rel") + "']").prop("checked", false);
        }
    }
    fixMarkup();
});

完全な例については、こちらを参照してください: http://jsfiddle.net/8Ctvd/3/

元の回答

を使用してattrいます。これにより、ケースで予測できない結果が得られます。また、使用.isは よりも遅くなり.propます。.propブール値に変換され、初期マークアップではなくタグの現在の状態を反映する jQuery で使用する必要があります。参考までに、このSOの回答を参照してください。

.change()また、最終的に呼び出すとnot('.all')、「すべて」チェックボックスで変更イベントが発生します。この更新されたフィドルを確認してください。

http://jsfiddle.net/8Ctvd/1/

于 2013-04-10T16:42:40.547 に答える