如果選中，則將類添加到單選按鈕

Question

如果復選框和單選按鈕被選中，我想將“selected”類添加到復選框和單選按鈕中。 我在網上找到了以下代碼以使其與復選框一起使用。

我需要更改什么才能在代碼中包含單選按鈕？

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

Answer 1

你不需要javascript。

有一個 css 選擇器，它是:checked

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

Answer 2

出於某種原因，Wordpress 中的某些插件刪除了該數據。 這就是為什么我想為所有單選按鈕和復選框添加一個額外的類。 下面是一個例子（這個框現在被選中）：

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

Answer 3

如果我正確理解您的代碼，我會假設您必須更改if (inputs[i].type == "checkbox") { （第 5 行左右）與if (inputs[i].type == "checkbox" || inputs[i].type == "radio" ) { ，那么它還應該包括單選按鈕。

Answer 4

這是 JSFiddle 源https://jsfiddle.net/rj1405/Lnv70bsu/14/

而不是像這樣添加類名

this.className += "選中";

我正在嘗試通過 javascript 方法添加

輸入[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>