Question

大家好，我为注册面板设计了一个页面在这个页面中，我使用带有不同价值的不同li的标签的单选按钮。我的设计是

<div class="usertype">
    <ul>
        <li id="bathroomslct"><label>Bathrooms:</label>
            <input type="radio" name="Bathrooms" value="1" id="Bathrooms1" /><label class="new-label" for="Bathrooms1">1</label>
            <input type="radio" name="Bathrooms" value="2" id="Bathrooms2" /><label class="new-label" for="Bathrooms2">2</label>
            <input type="radio" name="Bathrooms" value="3" id="Bathrooms3" /><label class="new-label" for="Bathrooms3">3</label>
            <input type="radio" name="Bathrooms" value="4" id="Bathrooms4" /><label class="new-label" for="Bathrooms4">4</label>
        </li>
        <li> <label>Furnished</label>
            <input type="radio" name="Furnished" value="Unfurnished" id="Unfurnished" /><label class="new-label" for="Unfurnished">Unfurnished</label>
            <input type="radio" name="Furnished" value="Semifurnished" id="Semifurnished" /><label class="new-label" for="Semifurnished">Semifurnished</label>
            <input type="radio" name="Furnished" value="Furnished" id="Furnished" /><label class="new-label" for="Furnished">Furnished</label>
        </li>

    </ul>
</div>

这里我使用此脚本来选择单选按钮

    <script>
    $(window).load(function(){
    $(".usertype ul li#bathroomslct label.new-label label").click(function () {
        $(".usertype ul li#bathroomslct label.new-label label").not(this).removeClass("selected").addClass('unselected')
        $(this).toggleClass("unselected").toggleClass("selected");
    });
    });
</script>

所以我如何解决我的问题没有选择不同的收音机..

Answer 1

以下是一个有效的例子：DEMO

$(document).ready(function () {
    $(".usertype li .new-label, .usertype li input").click(function (e) {
        console.log(e.target.tagName);
        if (e.target.tagName === "INPUT") {
            $(this).next("label").addClass("selected").removeClass("unselected")
            .siblings(".new-label").addClass("unselected").removeClass("selected");
        }
    });
});

由于您在标签上使用for="..."属性，因此单击标签时点击事件会触发两次。您只需要捕获input次点击。

您可能还希望从一开始就将selected和unselected类添加到元素中。

修改
刚刚注意到你想要改变背景颜色，所以我在演示中更新了它

Answer 2

如果我理解正确，你的jQuery选择器是错误的。变化

$(".usertype ul li#bathroomslct label.new-label label")

向

$(".usertype ul li#bathroomslct label.new-label")

Answer 3

试

jQuery(function ($) {
    $('.usertype li input[type="radio"]').change(function () {
        var $next = $(this).next().removeClass('unselected').addClass('selected');
        $(this).siblings('.new-label').not($next).removeClass('selected').addClass('unselected');
    });
});

演示：Fiddle

在单选按钮中为不同的<li> </li>选择或取消选择jquery

3 个答案: