如何使用 Javascript 更改输入伪类？答案

【问题标题】：How to change input pseudo class with Javascript?如何使用 Javascript 更改输入伪类？
【发布时间】：2015-06-25 23:58:28
【问题描述】：

我正在尝试构建一个“单选按钮”选择样式列表，但实际上并未使用 input type="radio"。我的后端开发人员建议我在特定情况下需要使用 type="checkbox" 创建它。我相信这可以用JS来完成。那么我怎样才能使当 1 个选项处于选中状态时，另一个使用 JS 未选中呢？这是我目前所拥有的：

http://codepen.io/rjtkoh/pen/VLZrMo

<label for="toggle-1">
<input type="checkbox" id="toggle-1">
<div>option A</div>
  </label>

<label for="toggle-2">
<input type="checkbox" id="toggle-2">
<div>option B</div>
</label>

和 CSS：

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
   margin-bottom: 20px;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
}

我看过其他讨论通过 JS 更改伪类的线程，但我处理输入类型的案例让我感到困惑。

【问题讨论】：

标签： javascript css input pseudo-class

【解决方案1】：

如果语义学适用于radio，为什么还需要使用checkbox？可能有合理的原因，但在不知道这一点的情况下，我建议您改用无线电组，它无需任何 JavaScript 即可工作，您只需在两个输入上设置一个通用的 name 属性：

input[type=radio] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
   margin-bottom: 20px;
}

/* Toggled State */
input[type=radio]:checked + div {
   background: red;
}

<label for="toggle-1">
  <input type="radio" name="option" id="toggle-1">
  <div>option A</div>
</label>

<label for="toggle-2">
  <input type="radio" name="option" id="toggle-2">
  <div>option B</div>
</label>

【讨论】：

【解决方案2】：

这是一个纯 javascript 解决方案，因为我在您的问题中没有看到 jQuery 标记：

如果您真的需要使用复选框来执行此操作，您可以这样做：

html

<div id="radio_group">
<label for="toggle-1">
<input type="checkbox" id="toggle-1">
<div>option A</div>
</label>

<label for="toggle-2">
<input type="checkbox" id="toggle-2">
<div>option B</div>
</label>
</div>

javascript

var options = document.getElementById('radio_group').childNodes;
var checkboxes = document.getElementsByTagName('input');

function uncheck() {
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
           checkboxes[i].checked = '';
        }
    }
}

function checkBox(e) {
  e.preventDefault();
  if(e.target.nodeName == 'DIV') {
    uncheck();
    e.target.previousElementSibling.checked = 'checked';    
  }
}

for (var i = 0; i < options.length; i++) {
    options[i].addEventListener('click', checkBox, false);
}

这是一个小提琴 --> https://jsfiddle.net/tL68Lsub/

【讨论】：

【解决方案3】：

如果您确实需要该复选框用作收音机，您可以使用：

$("input[type='checkbox']").click(function () {
    if ($(this).is(":checked")) {
        $("input[type='checkbox']").not(this).removeAttr("checked");
        $(this).attr("checked", "true");
    }
})

【讨论】：