javascript dom 表单元素之 radio

radaio ：单选按钮

html:

<input type="radio" name="city" value="广州" id="myCheck"/> 广州

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

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

DOM:

实现元素type值：radio

checked=true/false 设置选中状态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
                <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 vchecked="";
for(var i=0;i<cbs.length;i++)
{
if(cbs[i].checked){
vchecked=cbs[i].value;
}
}
alert(vchecked);
}

</script>
    </head>
    <body>
        
        <input type="radio" disabled="disabled" checked="checked" name="city" value="上海" /> 上海
        <input type="radio" name="city" value="广州" id="myCheck"/> 广州
        <input type="radio" name="city" value="北京" /> 北京
        <input type="radio" name="city" value="深圳"/>深圳
        <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="禁用radio" />
            <input type="button" onclick="getCheckValue()" value="获取选择的值"/>
        
    </body>
</html>

jquery

<!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()
            {
               alert($("input[name='city']:checked").eq(0).val());
            }
        </script>
    </head>

    <body>
        <form>
           <input type="radio" id="myCheck" name="city" value="上海"  name="city" /> 上海
            <input type="radio"  name="city" value="北京" name="city" /> 北京
            <input type="radio" name="city" value="深圳" name="city" /> 深圳
            <input type="radio" name="city" value="广州" 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 表单元素之 radio

猜你喜欢