1

以下のようにチェックボックスのあるHTMLフォームがあります。

すべてを選択すると、他のチェックボックス {HR、FINANCE、IT、SALES} がチェックされるはずです

すべての選択を解除すると、他のチェックボックス {HR、FINANCE、IT、SALES} がオフになるはずです

すべてがチェックされ、{HR、FINANCE、IT、SALES} のいずれかのチェックボックスがオフになっている場合、すべてのチェックボックスがオフになっている必要があります。

以下は私のHTMLのマークアップです....どうすればjQuery/javascriptを使ってそうすることができますか????

<input type="checkbox" name="Dept" value="ALL"/>

<input type="checkbox" name="Dept" value="HR"/>

<input type="checkbox" name="Dept" value="FINANCE"/>

<input type="checkbox" name="Dept" value="IT"/>

<input type="checkbox" name="Dept" value="SALES"/>
4

4 に答える 4

1

これを試して

jQuery > 1.6

// Cache the selectors as they are being multiple times
var $all = $('input[value=ALL]'),
    $inputs = $('input');

$all.change(function () {
    // Set the other inputs property to the all checkbox 
    $inputs.not(this).prop('checked', this.checked);
});

// Change event for all other inputs
$inputs.not($all).change(function () {
    var $others = $inputs.not($('input[value=ALL]'));

    // Get the checked checkboxes
    var $checked = $others.filter(function () {
        return this.checked;
    });
    // If length is not equal then uncheck the All checkbox
    if ($others.length !== $checked.length) {
        $all.prop('checked', false);
    }
});

jQuery1.4.4 

var $all = $('input[value=ALL]'),
    $inputs = $('input');

$all.change(function () {
    var allChk = this;
    $inputs.each(function() {
        this.checked = allChk.checked;
    });
});

$inputs.not($('input[value=ALL]')).change(function () {

    var $others = $inputs.not($('input[value=ALL]'));

    var $checked = $others.filter(function () {
        return this.checked;
    });
    if ($others.length !== $checked.length) {
        $all[0].checked = false;
    }
});

jQuery > 1.6 フィドル

jQuery 1.4.4 フィドル

于 2013-08-07T02:17:56.413 に答える
1

これを行う1つの方法は次のとおりです。

$(document).ready(function() {
    var $cbs = $('input[name="Dept"]').click(function() {
        if (this.value==="ALL")
            $cbs.prop("checked", this.checked);
        else if (!this.checked)
            $cbs[0].checked = false;
    });
});

驚くほど良いデモ: http://jsfiddle.net/MNbDw/2/

明らかに、上記のコードには、「ALL」チェックボックスが最初のチェックボックスになるというハードコーディングされた仮定があることに注意してください（ を使用してチェックを外した時点で$cbs[0]）。else if代わりにこれを行うようにケースを変更できます。

$cbs.filter('[value="ALL"]').prop("checked",false);

デモ: http://jsfiddle.net/MNbDw/3/

または、HTML を変更して、その特定のチェックボックスに ID などを指定します。

更新:この.prop()メソッドは jQuery 1.6 で導入されました。バージョン 1.5.2 の場合 (コメントで言及されているように)、.attr()代わりにここに示すように使用します (ただし、1.5.2 は非常に古いため、jsfiddle は実際にはオプションとして提供していないため、「外部リソース」の下に追加する必要がありました): http ://jsfiddle.net/MNbDw/9/

于 2013-08-07T02:19:57.110 に答える
1

デモ

$('input[type="checkbox"][name="Dept"]').change(function () {
    if (this.value == 'ALL') {
        $('input[name="Dept"]').prop('checked', this.checked);
    }
});

jQuery 1.5.2 で更新されたデモ

$('input[type="checkbox"][name="Dept"][value="ALL"]').change(function () {
    $('input[name="Dept"]').attr('checked', this.checked);
});
$('input[type="checkbox"][name="Dept"]:gt(0)').change(function () {
    if (!this.checked) {
        $('input[name="Dept"][value="ALL"]').removeAttr('checked');
    }
    if ($('input[type="checkbox"][name="Dept"]:gt(0)').length == $('input[type="checkbox"][name="Dept"]:gt(0):checked').length) {
        $('input[type="checkbox"][name="Dept"][value="ALL"]').attr('checked',true);
    }
});
于 2013-08-07T02:23:55.310 に答える
1

これを試して、

$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

case他のチェックボックスに追加されたクラスはどこですか

オンライン デモについては、 http:
//viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/をご覧ください。

于 2013-08-07T02:26:04.883 に答える