JavaScript Dom 表单元素之 checkbox

checkbox 复选框

HTML

<input type="checbox" value="1" name='city' > 上海

<input type="checbox" value="3" name='city' disabled > 北京禁用状态

<input type="checkbox" value="2" name='ciyt' checked>广州默认选中状态

通过Name 来分组，需要初始化化选中状态时需要添加 checked 属性无需赋值。

disabled: 设置是元素的启用状态：可以不需要赋值，或者 disabled='disabled'

节点有 HTMLCheckBoxElement 来实现，属于元素标签。 type类型是：checkbox

特殊属性:

checked :设置或者获取复选框选中状态

checkboxObject.checked=true|false
disabled: 设置或获取复选框的禁用状态
也可通过设置和删除 checked 属性来 设置选中状态

disabled 属性可设置或返回是否禁用 checkbox。

语法

checkboxObject.disabled=true|false

checked,disabled 可以直接设置 true/false，  获取checkbox组的值只能同循环获取。

<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript">
            function check() {
                //document.getElementById("myCheck").addAttribute("checked","checked");
                document.getElementById("myCheck").checked = true; //推荐用法

            }

            function uncheck() {
                //document.getElementById("myCheck").removeAttribute("checked");
                document.getElementById("myCheck").checked = false;

            }

            function getcheck() {
                alert(document.getElementById("myCheck").checked); // 输出 boolean 值 true 或者false
            }

            function doDisabled(obj) {
                var cb = document.getElementById("myCheck");
                console.log(cb.disabled);
                if(cb.disabled) {
                    //    cb.disabled=null;
                    cb.disabled = false;
                    cb.removeAttribute("disabled");
                    obj.value = "禁用checkbox";
                } else {
                    //cb.setAttribute("disabled","disabled");
                    cb.disabled = true;
                    //cb.disabled="disabled";
                    obj.value = "启用checkbox";
                }
            }
            
            //获取选中的值 
            function getCheckValue()
            {
                var cbs=document.getElementsByName("city");
                var vlist=new Array();
                for(var i=0;i<cbs.length;i++)
                {
                    if(cbs[i].checked){
                        vlist.push(cbs[i].value);
                    }
                }
                
                alert(vlist.toString());
            }
        </script>
    </head>

    <body>
        <form>
            <input type="checkbox" id="myCheck" value="1" name="city" /> 上海
            <input type="checkbox" id="myCheck" value="2" name="city" /> 北京
            <input type="checkbox" id="myCheck" value="3" name="city" /> 深圳
            <input type="checkbox" id="myCheck" value="4" name="city" /> 广州
            <input type="button" onclick="check()" value="选定复选框" />
            <input type="button" onclick="uncheck()" value="取消选定复选框" />
            <input type="button" onclick="getcheck()" value="获取选定复选框状态" />
            <input type="button" onclick="doDisabled(this)" value="禁用checkbox" />
            <input type="button" onclick="getCheckValue()" value="获取选择的值"/>
        </form>
    </body>

</html>

jqeury

要用prop 来设置 disabled,checked 属性。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script src="../javascript/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            function check() {
            
                $("#myCheck").prop("checked",true)

            }

            function uncheck() {
                $("#myCheck").prop("checked",false);
            }

            function getcheck() {
                //alert(document.getElementById("myCheck").checked); // 输出 boolean 值 true 或者false
                alert($("#myCheck").prop("checked"));
            }

            function doDisabled(obj) {
            //    debugger;
                if($("#myCheck").prop("disabled"))
                {
                    $("#myCheck").prop("disabled",false);
                    obj.value = "禁用checkbox";
                }else{
                    $("#myCheck").prop("disabled",true);
                    obj.value = "启用checkbox";
                }
            }
            
                //获取选中的值 
            function getCheckValue()
            {
               var vlist=new Array();
              $("input[name='city']:checked").each(function(i,element){
                  
                   vlist.push($(element).val());
              })
              
              alert(vlist.toString());
            }
        </script>
    </head>

    <body>
        <form>
                    <input type="checkbox" id="myCheck" value="1" name="city" /> 上海
            <input type="checkbox" id="myCheck" value="2" name="city" /> 北京
            <input type="checkbox" id="myCheck" value="3" name="city" /> 深圳
            <input type="checkbox" id="myCheck" value="4" name="city" /> 广州
            <input type="button" onclick="check()" value="选定复选框" />
            <input type="button" onclick="uncheck()" value="取消选定复选框" />
            <input type="button" onclick="getcheck()" value="获取选定复选框状态" />
            <input type="button" onclick="doDisabled(this)" value="禁用checkbox" />
                <input type="button" onclick="getCheckValue()" value="获取选择的值"/>
        </form>
    </body>

</html>

JavaScript Dom 表单元素之 checkbox

语法

猜你喜欢