实现radio取消功能及checkbox单选

来源:互联网 发布:伦敦金今晚数据 编辑:程序博客网 时间:2024/05/29 19:41

<html>
        <head>
                <title>单选按钮(radio)的取消与选中</title>
        </head>
        <body>
                <form>
                        <input type="radio" name='radio' value="1" onclick='check(this)'>单选一
                          <input type="radio" name='radio' value="2" onclick='check(this)'>单选二 
                </form>
                <script language="javascript">
                    var tempradio= null; 
                    function check(checkedRadio) 
                    { 
                        if(tempradio== checkedRadio){
                            tempradio.checked=false;
                            tempradio=null;
                          }
                           else{
                               tempradio= checkedRadio; 
                            }
                     } 
                </script>
        </body>
</html>

 

 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>CheckBox实现单选功能</title>
</head>
<body>
    
<script type="text/javascript">
    function selectOne(obj){
     alert(obj.getAttribute("name"));
     var objCheckBox = document.getElementsByName(obj.getAttribute("name"));
     for(var i=0;i<objCheckBox.length;i++){
         //判断复选框集合中的i元素是否为obj,若为否则便是未被选中
         if (objCheckBox[i]!=obj) {
             objCheckBox[i].checked = false;
         } else{
             //若是,原先为被勾选的变成勾选,反之则变成未勾选
             //objCheckBox[i].checked = obj.checked;
             
             //或者使用下句,亦可达到同样效果
             objCheckBox[i].checked = true;
         }
     }
    }
</script>
 
<form>
    <input type="checkbox" name="checkbox" value="1" onclick="selectOne(this)">复选框 ①<br>
    <input type="checkbox" name="checkbox" value="2" onclick="selectOne(this)">复选框 ②<br>
    <input type="checkbox" name="checkbox" value="3" onclick="selectOne(this)">复选框 ③<br>
    <input type="checkbox" name="checkbox" value="4" onclick="selectOne(this)">复选框 ④<br>
    <input type="checkbox" name="checkbox" value="5" onclick="selectOne(this)">复选框 ⑤<br>
</form>
</body>
</html>

原创粉丝点击