假单选按钮1选项

Question

我试图模拟单选按钮的行为，但使用span，而不是输入标记，以便更容易地使用css样式。我可以模拟状态的变化，但我不知道如何只选择一个按钮。

这是我的“状态变化”的js：

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

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

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

<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

尝尝这个

小提琴

Yo可以添加一个额外的div来分组类似的类别，并更新jquery代码如下所示。

<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

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

​

.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%);
}

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

​

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

PS:我说的是“几乎”相同的可访问性，因为我认为一些屏幕阅读器会忽略display: none的输入，为了解决这个问题，您仍然可以使用：

position: absolute;
left: -99999px;

编辑:因为它的接缝，你真的想要减少这个假输入，这应该是有帮助的：

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