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>

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

Answer 1

使用.prop（），因为你有多个元素具有相同的id使用类而不是id

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

然后

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

Answer 2

您需要在功能中添加return false。否则，a标记只是表现为普通a标记，因此会转到指定的href。并更改attr(...)的{{1}}。

prop(...)

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

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

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

但我建议将ID function select(){ $('#select-unselect').prop('checked',function(id,checked){ return !checked; }); return false; }更改为类#select-unselect，因为您不能拥有重复的ID。

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

Answer 3

使用Prop而不是attr。请参阅此链接Jquery Attr 以查看attr和prop之间的区别 $（ '＃选择-取消选择'）丙（ '检查'，真）;

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

如何使用javascript / jquery选中/取消选中复选框

html代码

3 个答案: