JQuery实现checkbox状态切换（Toggle）

点击查看效果演示。

有如下一段HTML代码，是一个checkbox复选框：

<div class="line">
    <label for="status">
        <input type="checkbox" id="status" name="status" value="1" />开启
    </label>
</div>

我们希望点击div.line的时候，能够自动切换checkbox的状态。

这个实现起来也很简单，JS代码如下：

<script type="text/javascript">
    $(function() {
        $('.line').click(function () {
            var checkbox = $(this).find(':checkbox');
            checkbox.prop('checked', !checkbox.prop('checked'));
        });
    });
</script>

注意，要用prop判断checked属性，用attr达不到效果。

 

参考资料：

1. Click toggle with jQuery