如何使用 javascript/jquery 选择/取消选择复选框答案

【问题标题】：how to select / unselect the checkboxes using javascript/jquery如何使用 javascript/jquery 选择/取消选择复选框
【发布时间】：2013-08-22 08:12:45
【问题描述】：

我有以下html代码

html代码

<p><a href="" onclick="select()">Select All</a>&nbsp; / &nbsp;<a href="" onclick="unselect()" >Unselect All</a> </p>

{% for field in fields %}
  <div class="contact_align">    
    <input id="select-unselect" type="checkbox" name="invite" value="so">{{ field }}
  </div>
{% endfor %}

<script type="text/javascript">
    function select(){
                $('#select-unselect').attr('checked',true);
            }
    function unselect(){
                $('#select-unselect').attr('checked',false);
            }               
</script>

所以上面是我的代码，但功能不起作用，所以任何人都可以让我知道我在上面的代码中做错了什么并让它工作吗？

【问题讨论】：

看起来您正在使用 ID 循环创建复选框。该 ID 必须是唯一的。

标签： javascript jquery django checkbox jquery-selectors

【解决方案1】：

您需要在函数中添加return false。否则，a 标签的行为与正常的a 标签一样，因此会转到指定的href。并将attr(...) 更改为prop(...)。

function select(){
    $('#select-unselect').prop('checked',true);
    return false;
}

function unselect(){
    $('#select-unselect').prop('checked',false);
    return false;
}

或者像这样在一个函数中切换它：

function select(){
    $('#select-unselect').prop('checked',function(id,checked){ return !checked; });
    return false;
}

但我建议将 ID #select-unselect 更改为 .select-unselect 类，因为您不能有重复的 ID。

还将<input id="select-unselect" type="checkbox" name="invite" value="so">{{ field }} 更改为<input class="select-unselect" type="checkbox" name="invite" value="so">{{ field }}

【讨论】：

现在我已经更改了href="javascript"，但是当我点击selectAll 时，它只选择了一个起始复选框字段，而不是所有复选框？
是的，所以您需要将您的 id 更改为类，正如我回答的第二部分所说。因为 JavaScript/jQuery 只能选择一个 ID（第一个）。
k 感谢它在我更改id to class 之后的工作，无论如何我们是否可以只用一个函数而不是两个函数来实现这个功能？我的意思是为选择和取消选择链接分配相同的功能？

【解决方案2】：

使用 .prop()，因为你有多个具有相同 id 的元素使用 class 而不是 id

<input class="select-unselect" type="checkbox" name="invite" value="so">{{ field }}

然后

$('.select-unselect').prop('checked',true);

【讨论】：

k 但是现在，如果我有四个复选框字段并且当点击selectall 时，只有一个复选框被选中并立即消失（可能是它的引用）

【解决方案3】：

使用 Prop 代替 attr。请查看此链接Jquery Attr 以了解 attr 和 prop 之间的区别。
$('#select-unselect').prop('checked',true);

并尝试使用类而不是控件的 id。

【讨论】：