首页 热点专区 小学知识 中学知识 出国留学 考研考公
您的当前位置:首页正文

radio单选框的选中与取消

2024-12-07 来源:要发发知识网

需求:

单选框可重复点击选中和取消;

背景:

单选框只可以选中,取消需要点击其他单选框。

解决方案:

<!DOCTYPE HTML>
<html>
<head>
    <title>单选按钮取消选中</title>
    <script type="text/javascript" 
    </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>  

显示全文