阅读更多…" />

复选框的表现形式

复选框全选与取消的应用:

关于indeterminate属性

视觉上,checkbox有三种状态:checkeduncheckedindeterminate(不确定的)。看起来就像这样子:







对于indeterminate状态的checkbox需要注意的是:无法在HTML中设置checkbox的状态为indeterminate。因为HTML中没有indeterminate这个属性,可以通过Javascript脚本来设置它:

            var checkbox = document.getElementById("some-checkbox");
            checkbox.indeterminate = true;

或者通过jQuery来设置:

            $("#some-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+

其实checkboxindeterminate状态实际就是视觉上的,但是它的值仍然有checkedunchecked,这意味着indeterminate状态的checkbox的真正价值只在于用户界面上更友好!


最后我本页面的代码效果如下:

<!DOCTYPE html>

<html>

<head>

    <title>复选框的表现形式</title>

</head>

    <div>

    <fieldset>

    <legend>复选框全选与取消的应用:</legend>

        <p>indeterminate</p>

        <ul>

            <li>

                <input type="checkbox" id="checkall">

                <label for="value1">全选/取消</label>

            </li>

            <li>

                <ul id="checklist">

                    <li>

                        <input type="checkbox" name="arr[]" value="1">

                        <label for="value1">value1</label>

                    </li>

                    <li>

                        <input type="checkbox" name="arr[]" value="2">

                        <label for="value1">value2</label>

                    </li>

                    <li>

                        <input type="checkbox" name="arr[]" value="3">

                        <label for="value1">value3</label>

                    </li>

                    <li>

                        <input type="checkbox" name="arr[]" value="4">

                        <label for="value1">value4</label>

                    </li>

                    <li>

                        <input type="checkbox" name="arr[]" value="5">

                        <label for="value1">value5</label>

                    </li>

                </ul>                

            </li>

        </ul> 

    </fieldset>

<body>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            /*全选按钮状态显示判断*/

            $("#checklist").find("input[type='checkbox']").click(function(){

                /*初始化选择为TURE*/

                $("#checkall")[0].checked = true;

                /*获取未选中的*/

                var nocheckedList = new Array(); 

                $("#checklist").find('input:not(:checked)').each(function() {

                    nocheckedList.push($(this).val());   

                });

                /*状态显示*/

                if (nocheckedList.length == $("#checklist").find('input').length) {

                    $("#checkall")[0].checked = false;

                    $("#checkall")[0].indeterminate = false;

                } else if (nocheckedList.length) {

                    $("#checkall")[0].indeterminate = true;

                } else {

                    $("#checkall")[0].indeterminate = false;

                }

            });

            // 全选/取消

            $("#checkall").click(function(){

                // alert(this.checked);

                if ($(this).is(':checked')) {

                    $("#checklist").find('input').each(function(){

                        $(this).prop("checked",true);

                    });

                } else {

                    $("#checklist").find('input').each(function(){

                        $(this).removeAttr("checked",false);

                        $(this).prop("checked",false); // 根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

                    });

                }

            });

        });

    </script>

</body>

</html>


Thanks♪(・ω・)ノ 感谢你长得那么好看还来看我的博客!see you around ~





复选框全选与取消以及checkbox的第三种状态属性 – indeterminate插图
00:00/00:00
分类: 代码|查看小知识

eson

🌀偶遇故人点头微笑^_^心像透明水滴☝没有喜悲…🍻

1 条评论

匿名 · 2019年1月16日 上午1:19

手机也支持真的太棒了

发表评论