jQuery_input[type=“checkbox“].html

最新推荐文章于 2024-04-01 19:33:10 发布

学无止境慢慢来

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量1.2k

点赞数

分类专栏： jQuery

原文链接：https://www.cnblogs.com/zhangyubao/p/7016728.html

版权

jQuery 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery_input[type="checkbox"]</title>
    <script src="lib/jquery/jquery-3.2.1.js"></script>
</head>
<body>
<ol id="layerList">
    <li><label for="Coffee">Coffee</label><input type="checkbox" name="layerName" id="Coffee"></li>
    <li><label for="Tea">Tea</label><input type="checkbox" name="layerName" id="Tea"></li>
    <li><label for="Milk">Milk</label><input type="checkbox" name="layerName" id="Milk"></li>
</ol>
<button id="selectAll">全选</button>
<button id="selectNone">全不选</button>

<script>
    /*参考：
        https://www.cnblogs.com/zhangyubao/p/7016728.html
        https://www.cnblogs.com/anymoredo/p/4980009.html
    知识点：
        1.与文本对齐，样式设置。
            input[type=checkbox] {
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 5px;
            }

        2.提交事件，筛选选中的复选框。
            $('#btn_submit').submit(function(){
                $('input[name="fruit"]:checked').each(function(){
                    var sfruit=$(this).val();
                    alert(sfruit);
                });
                return false;
            });

        3.判断是否选中
            $("#locateOneFeature").is(':checked') -> Boolean
            $obj.attr(属性, 值)方法，给 jquery 对象赋值。

            var bischecked=$('#cboxchecked').is(':checked');
            var fruit=$('input[name="fruit"]');
            bischecked?fruit.attr('checked',true):fruit.attr('checked',false);

            ajax获取html对象的属性的值：
            $(this).attr("file")
        */
    // 1.选择 input[name="layerName"]
    let inputs = $('input[name="layerName"]');
    console.log("inputs:", inputs);
    // inputs.click(function () {
    //     // 选择 选中的 input[name="layerName"]
    //     let checkedInputs = $('input[name="layerName"]:checked');
    //     for (let i = 0; i < checkedInputs.length; i++) {
    //         console.log(checkedInputs[i].id);
    //         // Coffee
    //         // Tea
    //         // Milk
    //     }
    // });

    // 全选。
    $("#selectAll").click(function () {
        for (let i = 0; i < inputs.length; i++) {
            // 以下代码都行。
            // inputs[i].checked = "checked";
            // inputs[i].checked = "true";
            // 推荐使用。
            inputs[i].checked = true;
        }
    });
    // 全不选。
    $("#selectNone").click(function () {
        for (let i = 0; i < inputs.length; i++) {
            // 以下代码都行。
            // inputs[i].checked = "";
            // 推荐使用。
            inputs[i].checked = false;
        }
    })
</script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery_input[type=“checkbox“].html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>input type="checkbox"</title> <script src="https://cdn.staticfile.org/jquery/1...
复制链接

扫一扫

专栏目录