jQuery 一键切换多个复选框

Question

我正在尝试编写一种简单的方法来使用 jQuery 选中和取消选中表单复选框。我尝试了一些在 Whosebug 中找到的示例，但我有限的 JS 知识使我无法获得结果。

这是我的代码，它没有按照我的意图将输入复选框更改为 "checked"，我还包括一个按钮来清除选择，但 JS 仍然没有引用它。

HTML:

<section id="opzioni">

<div class="bottoni-toggle">
    <!-- toggle button -->
    <input id="#select-all" type="button" value="Tutti" title="Toggle">
    <!-- clear button -->
    <input id="#select-none" type="button" value="Nessuno" title="Clear">
</div>

                <div class="col_opt">
                    <span class="custom_chb_wrapper">
                        <span class="custom_chb">
                            <input class="bottone-opzioni" id="_4wd" name="_4wd" type="checkbox">
                            <input id="_4wd" name="_4wd" type="hidden" value="0">
                        </span>
                        <label>4WD</label>
                    </span>
                </div>

                <div class="col_opt">
                    <span class="custom_chb_wrapper">
                        <span class="custom_chb">
                            <input class="bottone-opzioni" id="_airbag" name="_airbag" type="checkbox">
                            <input id="_airbag" name="_airbag" type="hidden" value="0">
                        </span>
                        <label>Airbag</label>
                    </span>
                </div>

jQuery:

$(document).ready(function() {
    $("#select-all").click(function() {
        var checkBoxes = $("input.bottone-opzioni");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });
});

这是我设置的 fiddle 测试：希望能帮到你。

Answer 1

你的 jQuery 很好，但是你的 HTML 是错误的。

http://jsfiddle.net/82hLvvtt/1/

您在 HTML id 中有一个 #，不像 jQuery 选择器那样需要它。删除它即可。

<input id="select-all" type="button" value="Tutti" title="Toggle">
<!-- clear button -->
<input id="select-none" type="button" value="Nessuno" title="Clear">

Answer 2

您的 HTML 有误。声明元素 ID 时不要包含#

例如

这是不正确的：

<input id="#select-all" type="button" value="Tutti" title="Toggle">

这是正确的

<input id="select-all" type="button" value="Tutti" title="Toggle">

Fiddle

$(document).ready(function() {
$("#select-all").click(function() {
    var checkBoxes = $("input.bottone-opzioni");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});

$("#select-none").click(function() {
    var checkBoxes = $("input.bottone-opzioni");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});

});

jQuery 一键切换多个复选框

jQuery toggle multiple checkboxes with one button

checkbox

jquery

toggle