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');
            }
        });
    });

可是調(diào)試發(fā)現(xiàn) 前面的勾選依然顯示打鉤，雖然他們的屬性 checked 為 false 了怎么回事？

之前用的是

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

這個不僅顯示沒有取消打鉤
連屬性 checked 都繼續(xù)為 true

回答

編輯回答

夏木

checked 其實是個獨立屬性。 checked 和 checked="checked" 甚至 checked=1 都是一個意思。
所以，設(shè)置的時候注意

$("input[name='myname']").prop("checked",false);

2018年7月28日 21:54

編輯回答

糖豆豆

prop里false和true不要加引號，你這種是用radio的情形吧。你應(yīng)該在當前元素change時讓其兄弟元素全部checked變?yōu)閒alse，當前的不要變

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

2017年5月24日 00:22

編輯回答

巫婆

在html中checkbox標簽只要有checked屬性都會被選中，這里的checked是attribute，建議你單選用radio

2017年2月7日 10:57

編輯回答

櫻花霓

疑問：

只能選擇一個

為什么不用單選？

<!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>

2017年10月10日 08:11

編輯回答

涼薄

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

2018年4月1日 23:28

編輯回答

護她命

<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;
    }
});

2017年1月31日 22:06