如果选中，则将类添加到单选按钮答案

【问题标题】：Add class to radio button if checked如果选中，则将类添加到单选按钮
【发布时间】：2017-07-13 19:43:32
【问题描述】：

如果选中，我想将“已选择”类添加到复选框和单选按钮。我在网上找到了下面的代码，使其与复选框一起使用。

要在代码中也包含单选按钮，我需要进行哪些更改？

<script>
		var inputs = document.getElementsByTagName("input");
var checkboxes = [];

for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type == "checkbox") {
    checkboxes.push(inputs[i]);
    if (inputs[i].checked) {
      checked.push(inputs[i]);
    }
  }
}

for (var j = 0; j < checkboxes.length; j++) {
    checkboxes[j].onclick = function() {
        if (this.checked == true) {
            this.className += " selected";
        } else {
            removeClassName(this, 'selected');
        }
    }
}

function removeClassName(e,t) {
    if (typeof e == "string") {
        e = xGetElementById(e);
    }
    var ec = ' ' + e.className.replace(/^\s+|\s+$/g,'') + ' ';
    var nc = ec;
    if (ec.indexOf(' '+t+' ') != -1) {
        nc = ec.replace(' ' + t + ' ',' ');
    }
    e.className = nc.replace(/^\s+|\s+$/g,'');
    return true;
}
		</script>

【问题讨论】：

您的 sn-p 显示错误。 SyntaxError: 预期的表达式，得到 '

标签： javascript checkbox radio-button

【解决方案1】：

你不需要 javascript。

有一个css选择器，它是:checked

input[type="radio"]:checked {
    /* Use the css of selected class */
}

【讨论】：

【解决方案2】：

出于某种原因，Wordpress 中的某些插件删除了该数据。这就是为什么我想为所有单选按钮和复选框添加一个额外的类。下面是一个例子（这个框现在被选中）：

&lt;input id="payment_method_mollie_wc_gateway_ideal" type="radio" class="input-radio" name="payment_method" value="mollie_wc_gateway_ideal" data-order_button_text=""&gt;

【讨论】：

【解决方案3】：

如果我正确理解您的代码，我会假设您必须将 if (inputs[i].type == "checkbox") {（第 5 行附近）更改为 if (inputs[i].type == "checkbox" || inputs[i].type == "radio" ) {，然后它还应该包含单选按钮。

【讨论】：

我也试过了......然后单选按钮没有任何反应，我收到此错误：未捕获的引用错误：未定义检查

【解决方案4】：

这里是 JSFiddle 源码https://jsfiddle.net/rj1405/Lnv70bsu/14/

而不是像

那样添加类名

this.className += "selected";

我正在尝试通过javascript方法添加

inputs[i].classList.add('selected');

请找到以下代码供您参考。

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
   if (inputs[i].type == "checkbox" || inputs[i].type == "radio") {
   if (inputs[i].checked) {
    	inputs[i].classList.add('selected');
    	// console.log(inputs[i].classList);
           // console.log(inputs[i]);
   }
  }
}

  

 <input type="radio" name="imgsel" value="" checked="checked" />
   <input type="radio" name="imgse2" value="" checked/>
   <input type="checkbox" name="vehicle" value="Car" checked>

【讨论】：