如何从之前选择的删除单选按钮检查属性?

时间:2015-05-05 12:03:34

标签: javascript jquery html radio-button

我有一些单选按钮,我将选中的属性添加到选定的单选按钮,但有一个问题。我想从选中的单选按钮中删除checked =“checked”属性。

HTML代码:

rxx = new Regex(@"(?<=<p\b[^<]*>).*?(?=</p>)");
var reslt2 = rxx.Matches("<p><someURL></p><p><anotherURL></p>").Cast<Match>().ToList();

jQuery代码:

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

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

JSFiddle截图:

enter image description here

4 个答案:

答案 0 :(得分:1)

在检查新内容之前强行删除属性:

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

在设置新收音机之前,这将强制删除任何单选按钮上的所有checked。选择器当然可以更具体,就像在Idir的例子中一样。

另外,@ Regent posted a fiddle使用prop代替。我建议你使用它,正如文档中所述:

  

尽管如此,要记住关于checked属性的最重要的概念是它与checked属性不对应。该属性实际上对应于defaultChecked属性,应该仅用于设置复选框的初始值。 checked属性值不会随复选框的状态而改变,而checked属性则会改变。

答案 1 :(得分:1)

试试这个,

$(".tabtwo-info .brokersector").click(function() {
  $('input[name=brokersector]').removeAttr('checked');
  $(this).find('input:radio').attr('checked', 'checked');
});

答案 2 :(得分:0)

我同意[Rory McCrossan] [1],你不需要jQuery。但是你可以做到这一点:

$('input[name=brokersector]:checked').removeAttr('checked');

答案 3 :(得分:-2)

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


});