Question

我正在尝试制作一个简单的javascript，以便在检查其中一个后，将具有相同ID的所有复选框标记为已选中。问题来自第一个状态，当我检查它是否有效时取消选中该复选框，当我取消选中它有效时它会再次取消选中具有相同ID的所有框但是之后如果我再次检查它则不起作用

到目前为止，这是我的代码：

$('input[id="check_01"]').on('click',function(){
    $('input[id="check_01"]').attr('checked', $(this).is(':checked'))
});

让我知道应该修复它的逻辑是什么？在JS Fiddle中它可以很好地工作，但不能在我的网络表单上。

这是输入的代码：

<input type="checkbox"  class="aboveage6" id="check_01"  name="utilities[]" value="1 parking"  /> 12<br />
<input type="checkbox"  class="aboveage6" id="check_01"  name="utilities_02[]" value="1 parqueo"  /> 12 2<br />

Answer 1

Ids是独一无二的，你应该改变它们。您可以选中所有复选框并添加click事件处理程序，然后使用check运算符查找以^=开头的所有ID，并使用prop设置其已检查的属性，这样功能在各方面都有效。

编辑 - attr vs prop

该属性反映了复选框内当前的“checked”值，而checked属性包含HTML源代码中复选框的初始状态。

$(document).ready(function(){

    $('input[type=checkbox]').on('click', function(){

        $('input[id^=check]').prop('checked', $(this).is(':checked'));

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"  class="aboveage6" id="check1"  name="utilities[]" value="1 parking"  /> 12<br />
<input type="checkbox"  class="aboveage6" id="check2"  name="utilities_02[]" value="1 parqueo"  /> 12 2<br />

Answer 2

正如@Mouser所说，ids是独一无二的。相反，您可以为这些输入提供一组对该组复选框唯一的类。我不知道你是否在其他地方使用它，但是你的＆＃34; aboveage6＆＃34;上课可能有用。然后在您的jQuery中，将'input[id="check_01"]'替换为'input.aboveage6'。或者你可以用你需要的任何类名替换aboveage6。

Answer 3

＆＃13;

$('input.check01').on('click', function() {
    $('input.check01').prop('checked', $(this).is(':checked') );

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="aboveage6 check01" id="check1" name="utilities[]" value="1 parking" />12
<br />
<input type="checkbox" class="aboveage6 check01" id="check2" name="utilities_02[]" value="1 parqueo" />12 2
<br />

＆＃13;

这应该这样做。

更改了ID。它们现在是独一无二的。单击时，它将选择具有相同类的所有复选框，并选择/取消选择它们。

选择ID的原始代码也可以使用，但不建议根据规范允许。您需要将函数attr更改为prop。

在选中一个复选框时，Javascript检查具有相同ID的所有复选框

3 个答案: