Checkbox 的 checked 属性为 false 了,但是还是显示打钩怎么办?

有多个 checkbox 只能选择一个 当有两个都被勾选,最后选的会让之前选的被取消打钩 我用下面的方法

    $(':checkbox[type="checkbox"]').each(function(){
        $(this).click(function(){
            if($(this).prop('checked')){
                $(':checkbox[type="checkbox"]').removeAttr('checked');
                $(this).prop('checked','true');
            }
        });
    });

可是调试发现 前面的勾选依然显示打钩,虽然他们的属性 checked 为 false 了 怎么回事?

之前用的是

$(':checkbox[type="checkbox"]'). .prop('checked', false);

这个不仅显示没有取消打钩
连属性 checked 都继续为 true

阅读 26.1k
6 个回答

疑问:

只能选择一个

为什么不用单选?

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>
        </title>
    </head>
    <body>
        <div id="jie">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
        </div>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
        </script>
        <script>
            //不需要什么each的
            $('input[type="checkbox"]').on('change',function()
                {
                    $('input[type="checkbox"]').prop('checked',false);
                    $(this).prop('checked',true);
                });
        </script>
    </body>
</html>

htmlcheckbox标签只要有checked属性都会被选中,这里的checkedattribute,建议你单选用radio

prop里false和true不要加引号,你这种是用radio的情形吧。你应该在当前元素change时让其兄弟元素全部checked变为false,当前的不要变

$('input[type="checkbox"]').each(function(){                                
        $(this).change(function(){           
            $(this).siblings().prop('checked',false);   
    })
});
$('input[type="checkbox"]').each(function(){
    $(this).click(function(e){
        $('input[type="checkbox"]').prop('checked',false);
        $(this).prop('checked',true);
    });
});

checked 其实是个独立属性。 checked 和 checked="checked" 甚至 checked=1 都是一个意思。
所以,设置的时候注意

$("input[name='myname']").prop("checked",false); 
<div id="divBox">
    <input type="checkbox" name="chk" value="1" />
    <input type="checkbox" name="chk" value="2" />
    <input type="checkbox" name="chk" value="3" />
    <input type="checkbox" name="chk" value="4" />
    <input type="checkbox" name="chk" value="5" />
</div>
$('#divBox').click(function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeName == "INPUT") {
        var tc = target.checked;
        $(this).find('input').attr('checked', false);
        target.checked = tc;
    }
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题