jQuery 实现一个单选框点击选中或取消

最新推荐文章于 2024-07-30 03:31:48 发布

你好像很好吃a

最新推荐文章于 2024-07-30 03:31:48 发布

阅读量1.9k

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_44296929/article/details/103456569

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、实现思路：
1）首先我们为radio添加一个data-*的属性值，如果当前radio为checked状态，那么我们令data-*的值为true，未选中的状态为false。
2）我们为radio添加一个click事件，当radio点击以后，判断如果data-*属性值为true，说明这个radio之前是被选中的，则点击以后应该取消选中，若想取消选中，则我们要为radio移除checked属性并将data-*属性的值改为false。
3）若判断data-*属性值为false，则说明之前为未选中，点击之后将该radio切换为选中，则首先为该radio添加checked属性，再将其它radio的data-*属性该为false变为未选中状态，最后再将该radio的data-*属性修改为ture选中状态即可。

2、如果你对data-*属性不是特别的了解：请点击这里（我自己总结的一篇文章）

3、这里还用到了prop()方法：点击了解prop()方法的用法

4、下面是我从网上找的一个小demo：下面的代码我没有跑，其实下面代码核心部分就是中间的那一部分，其他的自己修改，最主要的其实是思路，相信你理解了实现思路就可以自己实现：

<!DOCTYPE HTML>
<html>
<head>
    <title>单选按钮取消选中</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function(){
            $('input:radio').click(function(){
             
                var domName = $(this).attr('name');

                var $radio = $(this);
                // if this was previously checked
                if ($radio.data('waschecked') == true){
                    $radio.prop('checked', false);
                    $("input:radio[name='" + domName + "']").data('waschecked',false);
                    //$radio.data('waschecked', false);
                } else {
                    $radio.prop('checked', true);
                    $("input:radio[name='" + domName + "']").data('waschecked',false);
                    $radio.data('waschecked', true);
                }
            });
        });
    </script>
</head>
<body>
<p>您的选择是？</p>

<form>
    <input type="radio" name="browser" value="">选项1<br />
    <input type="radio" name="browser" value="">选项2<br />
    <input type="radio" name="browser" value="">选项3<br />
    <input type="radio" name="browser" value="">选项4<br />
</form>

</body>
</html>