[英]how to select / unselect the checkboxes using javascript/jquery
我有以下html代码
<p><a href="" onclick="select()">Select All</a> / <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>
所以上面是我的代码,功能不起作用,所以任何人都可以让我知道我在上面的代码中做错了什么并使它正常工作吗?
使用.prop(),同样因为您有多个具有相同id的元素,所以使用class代替id
<input class="select-unselect" type="checkbox" name="invite" value="so">{{ field }}
然后
$('.select-unselect').prop('checked',true);
您需要在函数中添加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 }}
使用属性而不是attr。 请查看此链接Jquery Attr以了解attr和prop之间的区别。
$( '#选择,取消选择')丙( '检查',真)。
并尝试使用类而不是控件的id。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.