¿Cómo cambiar la pseudo class de input con Javascript?

Estoy intentando crear una list de estilo de selección de "button de opción", pero no estoy usando el tipo de input = "radio". Mi desarrollador backend me ha aconsejado que necesito crear esto usando type = "checkbox" en nuestro caso específico. Creo que esto se puede hacer con JS. Entonces, ¿cómo puedo hacerlo para que cuando la opción 1 esté en estado verificado, la otra esté desmarcada usando JS? Esto es lo que tengo hasta ahora:

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

y 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: networking; } 

He echado un vistazo a otros temas que hablan sobre el cambio de pseudo classs a través de JS, pero mi caso relacionado con los types de input me confunde.

3 Solutions collect form web for “¿Cómo cambiar la pseudo class de input con Javascript?”

¿Por qué necesita hacer esto con una checkbox si las sematics funcionan para la radio ? Puede haber una razón legítima, pero sin saber esto, le sugiero que use un grupo de radio, que funcionará sin ningún tipo de JavaScript, solo necesita establecer un atributo de name común en ambas inputs:

 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: networking; } 
 <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> 

Aquí hay una solución pura de javascript ya que no veo las tags jQuery en su pregunta:

Si REALMENTE necesita hacer esto con casillas de verificación, puede hacer esto:

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

aquí hay un violín -> https://jsfiddle.net/tL68Lsub/

Si realmente necesita la checkbox para funcionar como una radio, puede usar:

 $("input[type='checkbox']").click(function () { if ($(this).is(":checked")) { $("input[type='checkbox']").not(this).removeAttr("checked"); $(this).attr("checked", "true"); } }) 
  • ¿Cómo detectar si el soporte del browser especifica css pseudo-class?
  • ¿Cómo se itera sobre todos los methods en una pseudoclass de JavaScript, independientemente de si están marcados enumerable o no?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.