He visto que esto funciona para la mayoría de los usuarios, pero por alguna razón no es así para mí. Yo uso Google Chrome.
radioBut = document.querySelector(".rad-design") getColor = function(){ for (i=0; i<radioBut.length; i++){ if (radioBut[i].checked){ console.log(radioBut[i) } }html
<form id = "rad"> <div class = "radioAll"> <label class="rad-label"> <input type="radio" class="rad-input" name="colList"> <div class="rad-design"></div> </label> <label class="rad-label"> <input type="radio" class="rad-input" name="colList"> <div class="rad-design"></div> </label> </div> </form>El selector debe ser document.querySelectorAll para obtener entradas como matriz y debe apuntar a la clase .rad-input que es la entrada y no .rad-design que es la etiqueta. También debe usar checked para las entradas para hacer que la entrada sea verificada, no es check . Además, no puede establecer checked en dos entradas con el mismo nombre. Si eso se hace, solo se verificará la última entrada con ese nombre.
violín de trabajo
const radioBut = document.querySelectorAll(".rad-input") getColor = function () { for (i = 0; i < radioBut.length; i++) { if (radioBut[i].checked) { console.log(radioBut[i]) } } } <form id="rad"> <div class="radioAll"> <label class="rad-label"> <input type="radio" class="rad-input" checked name="colList"> <div class="rad-design">One</div> </label> <label class="rad-label"> <input type="radio" class="rad-input" name="colList"> <div class="rad-design">Two</div> </label> </div> <button type="button" onclick="getColor()">getColor</button> </form>document.querySelector devuelve solo un elemento, no una matriz/lista, por lo que en el bucle for en i<radioBut.length radioBut.length no está undefined , debe usar document.querySelectorAll() en su lugar.
También noté que ha seleccionado el div y no la entrada y tiene un par de errores de sintaxis.
Tal vez esto pueda ayudarle:
const radioBut = document.querySelectorAll(".rad-input") const getColor = function(){ for (let i=0; i<radioBut.length; i++){ if (radioBut[i].checked){ console.log(radioBut[i].value) } } } console.log(getColor()) <form id = "rad"> <div class = "radioAll"> <label class="rad-label"> <input type="radio" class="rad-input" value='A' name="colList"> <div class="rad-design"></div> </label> <label class="rad-label"> <input type="radio" class="rad-input" value='B' name="colList" checked> <div class="rad-design"></div> </label> </div> </form> Otra opción es usar la funcionalidad del elemento de form
const form = document.getElementById('rad'); const getColor = function(){ return form.colList.value; } console.log(getColor()) <form id = "rad"> <div class = "radioAll"> <label class="rad-label"> <input type="radio" class="rad-input" value='A' name="colList"> <div class="rad-design"></div> </label> <label class="rad-label"> <input type="radio" class="rad-input" value='B' name="colList" checked> <div class="rad-design"></div> </label> </div> </form>