0

http://jqueryui.com/download/の「Toggle All」機能の動作を再現しようとしています

「Toggle All」チェックボックスを選択すると、同じ div コンテナにあるすべての入力ボックスをチェックしたいと思います。「すべて切り替え」チェックボックスの選択を解除すると、逆になります。

今のところ、この動作を部分的に再現することに成功しています。
これが私のhttp://jsfiddle.net/D2RLR/2518/ですが、もっとスマートなものを実装したいと思います。
ヒントはありますか？ 

$('.toggle input').click(function () {
    var weekdays;
    for (var i = 0 ; i < 7; i++) {
        weekdays = $('#contest_data_updatePeriodicity_days_' + i);
        weekdays.prop("checked", this.checked);
    }
});

PS jqueryまたはアンダースコアを使用できます

contest_data_updatePeriodicity_days_1)セレクターを使用したい
2) div コンテナーのすべての平日を選択するとき、[すべて切り替え] チェック ボックスがオンになっていない場合はオンにする必要があります。すべてのフィールドの選択を解除すると逆になります。

http://jsfiddle.net/D2RLR/2518/

4

7 に答える 7

1

それ以外の

weekdays.prop("checked", true);

これを試して

weekdays.prop("checked", this.checked);

デモ

于 2012-10-10T20:41:53.667 に答える
1

.closestを使用して親 div を取得してから、 を使用しthis.checkedてステータスを切り替えてみてください。

固定デモ: http://jsfiddle.net/D2RLR/2530/

$(this)
  .closest('.control-group')
  .find(':checkbox')
  .prop("checked", this.checked);

<label class="toggleまた、Toggle All Hoursコントロール グループの も見逃しました。以下のようにhtmlを修正します。 

<label class="toggle">
   <input type="checkbox" class="ui-widget-content"> Toggle All Hours
</label>
于 2012-10-10T20:42:14.750 に答える
1

またはこれ、誰もが独自の答えを持っていますが、これは短くて甘いと思います:

EDIT：またはTats_innitの答えの組み合わせを使用した単純なイベント - http://jsfiddle.net/D2RLR/2534/

$('.toggle input').click(function () {
    $(this).parents('div.control-group').find('input').attr("checked", this.checked);
});
于 2012-10-10T20:45:04.263 に答える
0

別のアプローチは、切り替えられるものと同じコンテナーに「すべて切り替え」チェックボックスを含めることに依存しません。それはより柔軟で、わずかに多くの作業が必要です:

$.fn.toggleAll = function(selector) {
    return this.each(function() {
        $(this).click(function() {
            $(selector).filter(':checkbox').prop('checked', this.checked);
        });
    });
};
$('#all-days').toggleAll('[id^=contest_data_updatePeriodicity_days_]');
$('#all-hours').toggleAll('[id^=contest_data_updatePeriodicity_hours_]');

(これにより、おそらく行うべきいくつかのエラー チェックが省略されます。) http://jsfiddle.net/CrossEye/W7c9L/で実際の動作を確認できます。

于 2012-10-10T21:13:09.000 に答える
0

jsfiddleを変更しました。: トグル時間の前にチェックボックスを追加し忘れています。

$('.toggle input').click(function () {
 $(this).parents('div:first').find("input:checkbox").not(this).prop("checked",              $(this).prop("checked"));

});

于 2012-10-10T20:49:03.997 に答える
0

これをデモしてみてください*更新* http://jsfiddle.net/VqLfz/ または http://jsfiddle.net/UPWt4/

JQ にすべての作業を任せてthis.checkedください。ブール チェックの場合です。

それがケースに合うことを願っています:)

コード

新しい

$('.toggle input').click(function () {

    var foo = this.checked;
    $(this).parent().parent().find(':input').each(function(){ 
        $(this).prop("checked", foo);
    });
});

​

年

$('.toggle input').click(function () {
    var weekdays;
    for (var i = 0 ; i < 7; i++) {
        weekdays = $('#contest_data_updatePeriodicity_days_' + i);
        weekdays.prop("checked", this.checked);
    }
});

​
于 2012-10-10T20:41:18.533 に答える
0

平日のチェックボックスのイベントを使用して.change、それらのすべてがチェックされているかどうかを検出し、トグルチェックボックスのチェック状態を設定します

jsfiddle の例(フルスクリーン)

var $checkBoxToggle = $('.toggle [type=checkbox]'),
    $checkBoxDays = $('#contest_data_updatePeriodicity_days [type=checkbox]'),
    checkBoxDaysCount = $checkBoxDays.length;

$checkBoxToggle.change(function() {
    $checkBoxDays.prop('checked', this.checked);
});

$checkBoxDays.change(function() {
    var daysChecked = $checkBoxDays.filter(':checked').length;
    switch(daysChecked)
    {
        case 0:
            $checkBoxToggle.prop('checked', false);
            break;
        case checkBoxDaysCount:
            $checkBoxToggle.prop('checked', true);
            break;
        default:
            break;
    }
});​
于 2012-10-10T21:23:35.960 に答える