如何使用 JavaScript/jQuery 选择/取消选中复选框

how to select / unselect the checkboxes using javascript/jquery

本文关键字：复选框 取消 jQuery 何使用 JavaScript 选择      更新时间：2023-09-26

我有以下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>
所以

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

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

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 }}

使用

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

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

然后

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

使用 Prop 而不是 attr。请参阅此链接 Jquery Attr 以查看 attr 和 prop 之间的区别。
$('#select-unselect'(.prop('checked'，true(;

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

相关文章：