美文网首页
单选按钮实现复选框打钩效果radio &&checkbox(原生

单选按钮实现复选框打钩效果radio &&checkbox(原生

作者: 枣阳黄小明 | 来源:发表于2018-05-02 17:56 被阅读0次

    很多时候为了更直观的表现出选中的效果,所以很多时候需求是(我要单选的功能复选的效果)产品经理说的真是容易:

    用jquery?也许你会发现,你百度的度很多jquery方法都是无效的,我也试过好几个(图省事)结果是白白浪费了很多时间。

    废话不多说,上代码:

    ``` 

    <body>

            <input type="checkbox" name="reason" onclick="_select(this,'reason')" value="111"/>

            <input type="checkbox" name="reason" onclick="_select(this,'reason')" value="222"/>

            <input  type="checkbox" name="reason" onclick="_select(this,'reason')" value="333"/>

    </body>

    <script>

        function _select(obj,wow){

                var arr=document.getElementsByName(wow);

                for(var i=0,j=arr.length;i<j;i++){

                    if(arr[i]==obj && obj.checked){    

                            arr[i].checked=true;

                    }else{

                            arr[i].checked=false;

                    }

                }

        }

    </script>

    ```

    相关文章

      网友评论

          本文标题:单选按钮实现复选框打钩效果radio &&checkbox(原生

          本文链接:https://www.haomeiwen.com/subject/tfkzlxtx.html