如何从先前选择的单选按钮中删除选中的属性？

Question

我有一些单选按钮，我正在向选定的单选按钮添加检查属性，但有一个问题。我想从选定的单选按钮中删除 selected="checked" 属性。

HTML 代码：

<div class="tabtwo-info">
    <div class="tab-two">
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Unsecured Loans
                    </div>
                </div>
            </a>

        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Secured 2nd Charge Lending
                    </div>
                </div>
            </a> 
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Overdrafts
                    </div>
                </div>
             </a> 
        </div>
        <div class="seperator">
            <div class="container">
                <div class="row">   <span class="sep"></span>   
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Trade Finance
                    </div>
                </div>
            </a>

        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Business Cash Advance
                    </div>
                </div>
            </a>

        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Working Capital
                    </div>
                </div>
            </a> 
        </div>
        <div class="seperator">
            <div class="container">
                <div class="row">   <span class="sep"></span>   
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Stock Finance
                    </div>
                </div>
            </a>

        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 ">   <a class="brokersector" href="javascript:void(0);">
                <input type="radio" value="" id="" name="brokersector">
                <div class="image-cat-box">
                    <div class="image-box">
                    </div>
                    <div class="title-cat">
                        Acquisition Finance
                    </div>
                </div>
            </a>

        </div>
        <div class="seperator">
            <div class="container">
                <div class="row">   <span class="sep"></span>   
                </div>
            </div>
        </div>
    </div>
</div>

jQuery 代码：

$(".tabtwo-info .brokersector").click(function () {
    $(this).find('input:radio').attr('checked', true);
});

我的 JSFiddle：https ://jsfiddle.net/jj57q8fs/

JSFiddle 截图：

Answer 1

要在检查新属性之前强制删除属性：

$(".brokersector").click(function () {
    $('input[type=radio]').removeAttr('checked');
    $(this).find('input[type=radio]').attr('checked', 'checked');
});

checked在设置新的单选按钮之前，这将强制删除任何单选按钮上的所有内容。当然，选择器可以更具体，就像 Idir 的示例一样。

另外，@Regent发布了一个小提琴来代替prop。我建议您使用它，正如文档中所述：

然而，关于checked属性要记住的最重要的概念是它与checked属性不对应。该属性实际上对应于 defaultChecked 属性，并且应该仅用于设置复选框的初始值。checked 属性值不会随着复选框的状态而改变，而checked 属性却会改变。