jquery1.11 操做checkbox：全選、取消全選、獲取選擇元素、獲取取消選擇元素（總結）

時間 2019-12-10

標籤 jquery1.11 jquery checkbox 全選取消獲取選擇元素總結欄目 JQuery 简体版

原文原文鏈接

jquery1.11.1版本完成對checkbox的操做html

1. 使用屬性prop設置選中狀態jquery

2.使用:checked和:not(:checked)獲取選中的元素chrome

源碼：app

<!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

效果圖：ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。