Question

我有一个HTML表单，开头是这样的：

<div class="row form-group">
    <label for="real_name" class="col-sm-3 control-label">Name</label>
    <div class="col-sm-5">
        <input type="text" class="form-control require_name" name="real_name" id="real_name" maxlength="100">
    </div>
    <div class="col-sm-4 btn-group">
        <div class="btn btn-default btn-private btn-warning">
            <label for="private_check">Private</label>
            <input type="radio" id="private_check" class="privacy_check" name="privacy[real_name_privacy]" value=0 checked="checked" />
        </div>
        <div class="btn btn-default btn-public">
            <label for="public_check">Public</label>
            <input type="radio" id="public_check" class="privacy_check" name="privacy[real_name_privacy]" value=1 />
        </div>
    </div>
</div>

    <div class="row form-group">
        <label for="display_name" class="col-sm-3 control-label">Artist Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control require_name" name="display_name" id="display_name" value="This guy" maxlength="100">
        </div>
        <div class="col-sm-4 btn-group">
            <div class="btn btn-default btn-private">
                <label for="private_check">Private</label>
                <input type="radio" id="private_check" class="privacy_check" name="privacy[display_name_privacy]" value=0 />
            </div>
            <div class="btn btn-default btn-public btn-warning">
                <label for="public_check">Public</label>
                <input type="radio" id="public_check" class="privacy_check" name="privacy[display_name_privacy]" value=1 checked="checked" />
            </div>
        </div>
    </div>

等等，其中有十几个。对于'btn-group'中的那些.btn div，我得到了这个jQuery：

$(".btn").click(function() {
    $(this).find("input").attr('checked', true);
    $(this).siblings().find("input").attr('checked', false);
    $(this).toggleClass('btn-warning btn-default');
    $(this).siblings().toggleClass('btn-default btn-warning');
});

当单击.btn时，应该在每个.btn上切换基础输入，并将其类从.btn-warning切换到.btn-default，具体取决于是否已检查。上面显然不起作用：单击第一个上的.btn将在.btn中切换其兄弟的属性，但此后每个.btn将在DOM中切换它上面的每一个，并且toggleClass不做任何事情在我点击的.btn组中，但点击下方btn组中的按钮也会改变上面的那个。我试图用艰难的方式去做，嵌套的div检查每个按钮是否删除或添加了必要的类，具体取决于其底层单选按钮的状态，但得到了相同的结果。我认为问题出在兄弟姐妹（）上，但是任何人都有关于如何在不遍历整个DOM寻找每个.btn的情况下完成这项工作的想法？

Answer 1

尝试

jQuery(function ($) {
    $(".btn").click(function (e) {
        if (!$(this).find("input").is(':checked') || !$(this).is('.btn-warning')) {
            $(this).find("input").prop('checked', true);
            $(this).siblings().addBack().toggleClass('btn-default btn-warning');
        }
    });
});

演示：Fiddle

<强>更新

第二个问题与单选按钮的重复ID有关，您有多个ID为private_check和publi_check且label具有for属性的元素设置这是问题的原因，将ID更改为private_check<n>和public_check<n>，以便只有一个元素具有特定ID。

<label for="private_check1">Private</label>
<input type="radio" id="private_check1" class="privacy_check" name="privacy[real_name_privacy]" value=0 checked="checked" />

Answer 2

这是你想要的吗？

$(".btn").click(function() {
   $(this).find("input").prop('checked', true);
   $(this).siblings().find("input").prop('checked', false);
   $(this).addClass('btn-warning btn-default');
   $(this).siblings().removeClass('btn-default btn-warning');
});

jQuery兄弟，toggleClass影响其他div

2 个答案: