JQuery全选、取消全选

jquery1.6之后，对checked，selected等进行状态改变时，需要使用prop()，而不是attr()
代码功能：
单选框取消选择
复选框全选
复选框取消全选
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        // 复选框 全选
        var set_all_choice = function(argument) {
            $('input[type="checkbox"][name="color"]').each(function(){
                $(this).prop("checked", true);
            });
        };

        // 复选框 取消全选
        var set_all_not_choice = function(argument) {
            $('input[type="checkbox"][name="color"]').each(function(){
                $(this).prop("checked", false);
            });
        };

        // 单选框 取消选择
        var set_all_not_choice_radio = function(argument) {
            $('input[type="radio"][name="color"]').each(function(){
                $(this).prop("checked", false);
            });
        };

        var bind = function(){
            $("#all_choice").click(function(event) {
                /* 全选 */
                set_all_choice();
            });
            $("#all_not_choice").click(function(event) {
                /* 取消全选 */
                set_all_not_choice();
            });
            $("#all_not_choice_radio").click(function(event) {
                /* 取消选择-单选框 radio */
                set_all_not_choice_radio();
            });
        };

        var init = function(){
            // jquery1.6之后，对checked，selected等进行状态改变时，需要使用prop()，而不是attr()
        };

        $(function(){
            init();
            bind();
        })

    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            多选：
            <button type="button" id="all_choice" class="btn btn-primary">全选</button>
            <button type="button" id="all_not_choice" class="btn btn-warning">取消全选</button>
        </div>
        <div class="row" style="margin-top: 10px;">
            <input type="checkbox" name="color" value="red">红色
            <input type="checkbox" name="color" value="orange">橙色
            <input type="checkbox" name="color" value="blue">蓝色
            <input type="checkbox" name="color" value="yellow">黄色
        </div>

        <div class="row" style="margin-top: 10px;">
            单选：
            <button type="button" id="all_not_choice_radio" class="btn btn-danger">取消选择</button>
        </div>
        <div class="row" style="margin-top: 10px;">
            <input type="radio" name="color" value="red">红色
            <input type="radio" name="color" value="orange" checked>橙色
            <input type="radio" name="color" value="blue">蓝色
            <input type="radio" name="color" value="yellow">黄色
        </div>
    </div>
</body>
</html>
Jquery全选、取消全选、prop、attr

JQuery全选、取消全选

猜你喜欢
