javascript - 仅假单选按钮 1 选项

Question

我正在尝试模拟单选按钮的行为，但使用 span 而不是 input 标签，以便更容易地使用 css 设置样式。我可以模拟状态的变化，但我不知道如何只选择一个按钮。

这是我的“状态改变”的 js:

function CheckRadioButton() {
    $(".radio-button").click(function () {
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
        } else {
            $(this).addClass('checked');
        }
    });
}

我想做的是，如果一个按钮将其类更改为选中，则所有其他按钮都必须“未选中”。

我遇到的另一个问题是我有几个“类别”，我在其中使用了这种类型的按钮，我只想要每个类别中的唯一选项。例如:

<p class="fake-label">Skirt</p>
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>Yes</span>
            </div>
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>No</span>
            </div>

<p class="fake-label">Season</p>
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Summer</span>
                </div>
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Winter</span>
                </div>

我该怎么做才能在“是/否”和“夏季/冬季”之间仅“选择”一个，但两者同时进行？ (只有两个跨度可以同时“检查”类)

谢谢你:)

Answer 1

试试这个

FIDDLE

你可以添加一个额外的 div 来对相似的类别进行分组，并像下面这样更新你的 jquery 代码。

HTML

<p class="fake-label">Skirt</p>
<div class="radio-group">
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>Yes</span>
            </div>
            <div class="radio-button-wrapper">
                <span class="radio-button"></span>
                <span>No</span>
            </div>
</div>
<p class="fake-label">Season</p>
<div class="radio-group">
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Summer</span>
                </div>
                <div class="radio-button-wrapper">
                    <span class="radio-button"></span>
                    <span>Winter</span>
                </div>
</div>

Javascript

 $(".radio-button").click(function () {        
             $(this).closest('div.radio-group').find(".radio-button").removeClass('checked');  
             $(this).addClass('checked');               
  });