小王妃

导航

jquery checkbox实例

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul,
ol {
list-style: none;
padding: 0;
margin: 0;
}

li {
display: inline-block;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
<input type="checkbox" name="simple" id="" value="" />苹果
<input type="checkbox" name="simple" id="" value="" />苹果
<input type="checkbox" name="simple" id="" value="" />苹果
<input type="checkbox" name="simple" id="" value="" />苹果
<input type="checkbox" id="all" value="全选" />

<script type="text/javascript">
$(function() {
    // 触发全选事件
    $("#all").click(function() {
        $("input[name = 'simple'").prop("checked", this.checked);
    });
    // 响应全选事件
    $("input[name='simple']").click(function() {
        $("#all").prop("checked", $("input[name = 'simple'").length == $("input[name = 'simple'").filter(":checked").length ? true : false);
    });
    
})
</script>
</body>

<html>

posted on 2016-03-02 15:24  小王妃  阅读(153)  评论(0编辑  收藏  举报