0

ボタンクリックで一連のチェックボックスを操作しようとしていますが、その方法がわかりません。次のアクションを実行する必要があります。

  1. すべてのチェックボックスを選択します

  2. チェックボックス1〜12を選択します

  3. 奇数のチェックボックスを選択します

  4. チェックボックスも選択

  5. チェックボックスをクリアする

  6. スライダーの範囲を制御して週を選択

チェックボックスを更新している間すべて。

これが私のjsFiddleです：http：//jsfiddle.net/dYsg7/

最初は、ポイント1〜5を満たすために次のコードを使用していましたが、チェックボックスのレイアウトを変更したため、新しいデザインに実装する方法がわかりません。

   $('#week_none').click(function () {
        $('#week_boxesForm li').each(function (index) {
            $(this).find('input:checkbox').prop("checked", false);
        });
    });

    $('#week_all').click(function () {
        $('#week_boxesForm li').each(function (index) {
            $(this).find('input:checkbox').prop("checked", true);
        });
    });

    $('#week_term').click(function () {
        $('#week_boxesForm li').each(function (index) {
            if (index < 12) $(this).find('input:checkbox').prop("checked", true);
            else $(this).find('input:checkbox').prop("checked", false);
        });
    });

    $('#week_odd').click(function () {
        $('#week_boxesForm li').each(function (index) {
            if (index % 2 === 0) $(this).find('input:checkbox').prop("checked", true);
            else $(this).find('input:checkbox').prop("checked", false);
        });
    });

    $('#week_even').click(function () {
        $('#week_boxesForm li').each(function (index) {
            if (index % 2 !== 0) $(this).find('input:checkbox').prop("checked", true);
            else $(this).find('input:checkbox').prop("checked", false);
        });
    });
4

1 に答える 1

2

ポイント1〜6の実行方法は次のとおりです。

Javascript

$(".slider_weekRange2").slider({
    range: true,
    min: 1,
    max: 15,
    step: 1,
    values: [1, 12],
    slide: function (event, ui) {
        $(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]);
        $('input:checkbox[name="weeks_1"]').prop("checked", false);
        $('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true);
    }
});

$(".search_weekRange2").val($(".slider_weekRange2").slider("values", 0) +
    "-" + $(".slider_weekRange2").slider("values", 1));

$('.week_none').on('click', function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
});

$('.week_all').on('click', function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", true);
});

$('.week_term').on('click', function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $('input:checkbox[name="weeks_1"]').slice(0, 12).prop("checked", true);
});

$('.week_odd').on('click', function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $('input:checkbox[name="weeks_1"]:even').prop("checked", true);
});

$('.week_even').on('click', function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $('input:checkbox[name="weeks_1"]:odd').prop("checked", true);
});

デモ

于 2013-03-17T23:45:50.103 に答える