实现radio取消功能及checkbox单选

最新推荐文章于 2021-06-04 19:44:20 发布

月夜楓

最新推荐文章于 2021-06-04 19:44:20 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/cyxinda/article/details/78254018

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>
        <head>
                <title>单选按钮(radio)的取消与选中</title>
        </head>
        <body>
                <form>
                        <input type="radio" name='radio' value="1" οnclick='check(this)'>单选一
                          <input type="radio" name='radio' value="2" οnclick='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" οnclick="selectOne(this)">复选框 ①<br>
    <input type="checkbox" name="checkbox" value="2" οnclick="selectOne(this)">复选框 ②<br>
    <input type="checkbox" name="checkbox" value="3" οnclick="selectOne(this)">复选框 ③<br>
    <input type="checkbox" name="checkbox" value="4" οnclick="selectOne(this)">复选框 ④<br>
    <input type="checkbox" name="checkbox" value="5" οnclick="selectOne(this)">复选框 ⑤<br>
</form>
</body>
</html>