Klasse hinzufügen, wenn aktiviert

Question

Ich möchte die Klasse 'ausgewählt' zu beiden Kontrollkästchen und Optionsfelder hinzufügen, wenn sie aktiviert sind. Ich habe unten den Code online gefunden, damit es mit den Checkboxen funktioniert.

Was muss ich ändern, um die Optionsfelder auch in den Code aufzunehmen?

<script> 
 
\t \t 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; 
 
} 
 
\t \t </script>

Answer 1

Sie müssen Javascript nicht.

Es gibt einen CSS-Selektor für dieses, es ist :checked

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

Answer 2

Aus irgendeinem Grund einige Plugins in Wordpress, dass Daten entfernt. Deshalb möchte ich allen Radio Buttons und Checkboxen eine zusätzliche Klasse hinzufügen. Im Folgenden ein Beispiel (wird dieses Feld nun markiert):

<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

Wenn ich Ihren Code richtig verstehe, würde ich annehmen, dass Sie if (inputs[i].type == "checkbox") { (um Zeile 5) mit if (inputs[i].type == "checkbox" || inputs[i].type == "radio") { ändern müssen, dann sollte es Dazu gehören auch die Radio-Buttons. Hier

Answer 4

ist die JSFiddle Quelle https://jsfiddle.net/rj1405/Lnv70bsu/14/

Anstelle der Zugabe den Klassennamen wie

this.className += " selected";

Ich versuche tho hinzufügen durch JavaScript-Methode

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

bitte den Code unten finden für Ihre Referenz.

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) { 
 
    \t inputs[i].classList.add('selected'); 
 
    \t // 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>