jquery1.11 操作checkbox:全选、取消全选、获取选择元素、获取取消选择元素(总结)

jquery1.11.1版本完成对checkbox的操作

1. 使用属性prop设置选中状态

2.使用:checked和:not(:checked)获取选中的元素

 

源码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>测试CheckBox</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    div.content{

        width:30%;

        margin:auto;

        border:1px dotted #0000ff;

        background-color: #ffa0a0;

        padding:10px;

    }

    div.sel span{

        display: block;

    }

    .mt_s{

        margin-top:5px;

    }

</style>

</head>

<body>

    <div class="content">

        <h1>测试CheckBox</h1>

        <div class="sel mt_s">

            <span >按钮1<input type="checkbox" class="c1"></span>

            <span>按钮2<input type="checkbox" class="c2"></span>

            <span>按钮3<input type="checkbox" class="c3"></span>

            <span>按钮4<input type="checkbox" class="c4"></span>

            <span>按钮5<input type="checkbox" class="c5"></span>

        </div>

        <div class="op mt_s">

            <button onclick="selectAll(true)">全选</button>

            <button onclick="selectAll(false)">全消</button>

            <button onclick="getCheck(true)">获取选择数据</button>

            <button onclick="getCheck(false)">获取未选择数据</button>

        </div>

        <div class="sta mt_s">

            <span class="blue"><strong>结果:</strong></span><span class="status"></span>

        </div>

    </div>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

    "use strict";

    //全选/取消全选

    function selectAll(bcheck){

        var sel = getsel();

        log(sel);

        sel.prop("checked",bcheck);

    }

    //获取选中/未选中的记录

    function getCheck(bcheck){

        var sel = getsel();

        var c;

        if(bcheck){

            c = sel.filter(":checked");

        }

        else{

            c = sel.filter(":not(:checked)");

        }

        setStatus(c);

    }



    //获取全部checkbox

    function getsel(){

        return $(".sel input:checkbox");

    }

    //更新查询结果

    function setStatus(s){

        var cName="";

        log(s);

        for(var i=0;i<s.length;i++){

            cName +=$(s[i]).attr("class");

            if(i<s.length-1){

                cName +=","

            }

        }

        cName = cName==""?"没有数据":cName;

        $(".status").text(cName);

    }

    //记录控制台信息

    function log(s){

        console.log(s);

    }

</script>

</body>

</html>
View Code

效果图:

你可能感兴趣的:(checkbox)