1

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

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

4

3 回答 3

3

你需要return false在你的函数中添加一个。否则，a标签只是表现得像普通a标签，因此会转到href指定的标签。并更改attr(...)for 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为 class .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 }}

于 2013-08-22T08:19:43.180 回答
2

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

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

然后

$('.select-unselect').prop('checked',true);
于 2013-08-22T08:14:08.933 回答
0

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

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

于 2013-08-22T08:28:57.637 回答