Question

我正在尝试模拟单选按钮的行为但是使用而不是和输入标记一个跨度，以便更容易使用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

Yo可以添加一个额外的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');               
  });

Answer 2

您可以将实际输入的功能与使用其他标签的自由结合起来：

＆＃13;

.input-wrap {
  position: relative;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
    padding-left: 22px;
}

input[type="radio"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid black;
  border-radius: 50%;
  transform: translateY(-50%);
}

input[type="radio"]:checked + label:after {
  content: "";
  position: absolute;
  left:3px;
  top: 50%;
  width: 8px;
  height: 8px;
  background-color: #bada55;
  border-radius: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="input-wrap">
  <input type="radio" name="test" id="option1" checked><label for="option1">Option1</label>
</div>
<div class="input-wrap">
  <input type="radio" name="test" id="option2"><label for="option2">Option1</label>
</div>
<div class="input-wrap">
  <input type="radio" name="test" id="option3"><label for="option3">Option1</label>
</div>

＆＃13;

它类似于在示例中添加/删除类，但我们使用:checked + label选择器来选择当前检查输入的标签，这样我们就可以实现真实的可访问性输入（几乎）和以我们希望的方式编写标记的自由。最好的是这个解决方案只是css，它可以用来隐藏/显示页面的整个部分。

PS：我说＆＃34;几乎＆＃34;相同的可访问性，因为我认为某些屏幕阅读器将忽略display: none的输入，为了解决此问题，您仍然可以使用：

position: absolute;
left: -99999px;

编辑：因为它接缝你真的想要记下这个假输入，这应该有所帮助：

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

仅限假单选按钮1选项

2 个答案: