Question

我正在尝试使用jQuery编写一个简单的方法来检查和取消选中表单复选框。我已经尝试了一些在stackoverflow中找到的例子，但是我有限的JS知识让我无法获得结果。

这是我的代码，并没有将输入复选框更改为＆＃34;已选中＆＃34;按照我的意图，我还包括一个清除选择的按钮，但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用一个按钮切换多个复选框

2 个答案: