Jquery选择一个复选框时选择所有复选框答案

【问题标题】：Jquery Selecting all checkboxes when one checkbox is selectedJquery选择一个复选框时选择所有复选框
【发布时间】：2012-05-08 13:37:51
【问题描述】：

我有一系列从 smarty 模板构建的复选框。选择具有WTOPS值的特定复选框时，我希望此操作选择div中的所有其他复选框。这是我下面的代码，它不起作用

这是我的 jquery：

$("input[name=levelCheck]").change(function () {
if ($("input[name=levelCheck]:checked").val() == 'WTOPS') {
$("input[type='checkbox']").attr('checked', true);  
}
});

这是 HTML：

<div id="Women">
<label> <input type="checkbox" name="level_desc[]" id="levelCheck" value="WOPEN"> Open </label>
<label> <input type="checkbox" name="level_desc[]" id="levelCheck" value="WPREPOPT"> Prep Opt </label>
<label> <input type="checkbox" name="level_desc[]" id="levelCheck" value="WTOPS"> TOPS </label>
</div>

【问题讨论】：

您没有用引号括起您的属性值...input[name='levelCheck'] - 尝试添加这样的引号...
您有 3 个具有相同 id 的输入 - 使用 jQuery 定位这个非唯一 id 会给您带来意想不到的结果。这对于一个类来说是一个更好的例子。 id 值应该始终是唯一的。
@sur - 这可能是下一篇文章；）

标签： jquery

【解决方案1】：

下面的脚本应该可以解决您拥有的标记，

DEMO

$(function() {
    $("input[name=level_desc\\[\\]]").change(function() {        
        if ($("input[name=level_desc\\[\\]]:checked").val() == 'WTOPS') {
            $("input[type='checkbox']").attr('checked', true);
        }
    });
});

正如迈克尔指出的那样，使用引号看起来更好，

$(function() {
    $("input[name='level_desc[]']").change(function() {        
        if ($("input[name='level_desc[]']:checked").val() == 'WTOPS') {
            $("input[type='checkbox']").attr('checked', true);
        }
    });
});

【讨论】：

当你只需要一个引号换行的时候用斜线？
@MichaelD.Irizarry 同意。引号看起来比斜线更好。

【解决方案2】：

尝试定位特定的复选框 - 无需全部查看。

$("input[value=WTOPS]:not(:checked)").change(function () {
    $("input[type='checkbox']").attr('checked', 'checked');  
});

这专门针对未选中和更改时的 WTOPS 复选框。然后它会触发所有要检查的复选框。该问题没有谈到在未选中 WTOPS 框时将所有选项更改为未选中，但这是一种方法：

$("input[value=WTOPS]").change(function () {
    $("input[type='checkbox']").attr('checked', $("input[value=WTOPS]").val());  
});

【讨论】：

【解决方案3】：

您的$("input[name=levelCheck]:checked") 应该是$("input#levelCheck:checked")

【讨论】：

【解决方案4】：

试试这个：

$("input#levelCheck").change(function () {
if ($("input#levelCheck:checked").val() == 'WTOPS') {
$("input[type='checkbox']").attr('checked', true);  
}
});

【讨论】：

【解决方案5】：

当你使用属性值选择器时，你应该将值用引号括起来 -

$("input[name='levelCheck']:checked");

注意包裹值name='levelCheck'的引号

【讨论】：

【解决方案6】：

试试这个

$("input[type='checkbox']").change(function () {
    console.log($(this));
if ($(this).val() == 'WTOPS') {
$("input[type='checkbox']").attr('checked', true);  
}
});

在这里查看http://jsfiddle.net/khqPj/

【讨论】：

【解决方案7】：

您多次使用 ID 属性，并且需要将名称用单引号括起来。

HTML

<div id="Women">
<label> <input type="checkbox" name="level_desc[]" id="levelCheck1" value="WOPEN"> Open </label>
<label> <input type="checkbox" name="level_desc[]" id="levelCheck2" value="WPREPOPT"> Prep Opt </label>
<label> <input type="checkbox" name="level_desc[]" id="levelCheck3" value="WTOPS"> TOPS </label>
</div>

JS

$("input[name='level_desc[]']").change(function () {
     if ($("input[name='level_desc[]']:checked").val() == 'WTOPS') {
         $("input[name='level_desc[]']").attr('checked', true);  
     }
});

演示
http://jsfiddle.net/ScMsX/

【讨论】：