Tengo un grupo de botones de opción y un botón de enviar. Cuando hago clic en el botón Enviar, aparece un mensaje que me dice en qué botón de radio hice clic. Lo que quiero hacer ahora es cambiar el color del botón de opción seleccionado, ¿cómo puedo hacerlo? He intentado muchas cosas sin éxito. Aqui esta el codigo

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    }
  }
}
<input type="radio" name="gender" class="one" value="Male" />Male <br>
<input type="radio" name="gender" class="one" value="Female" />Female<br>
<input type="radio" name="gender" class="one" value="Other" />Other<br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
javascript html
0
Douk 23 oct. 2019 a las 12:25

4 respuestas

La mejor respuesta

Puede ajustar los botones de radio a un div y luego aplicar una clase CSS cuando esté seleccionado. Luego, en su CSS, puede definir los estilos necesarios.

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      optionContainer[i].parentElement.classList.add('selected');
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    } else {
      optionContainer[i].parentElement.classList.remove('selected');
    }
  }
}
.selected {
  color: Red;
}
<div>
  <input type="radio" name="gender" class="one" value="Male" />Male
</div>
<div>
  <input type="radio" name="gender" class="one" value="Female" />Female
</div>
<div>
  <input type="radio" name="gender" class="one" value="Other" />Other
</div>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
0
Nidhin Joseph 23 oct. 2019 a las 09:30

Puede personalizar el estilo del botón de radio como desee. El estilo directo en la radio no funcionará.

A continuación se muestra un ejemplo.

Tampoco ha proporcionado el estilo para la clase selected. Agregue eso para ver el cambio de estilo.

Este es el estilo que necesitabas.

.container.selected  input:checked ~ .checkmark {
  background-color: red;
}

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      optionContainer[i].parentElement.classList.add("selected");
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
    } else {
      optionContainer[i].parentElement.classList.remove("selected");
    }
  }
}
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196f3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.container.selected  input:checked ~ .checkmark {
  background-color: red;
}
<h1>Custom Radio Buttons</h1>
<label class="container"
  >One
  <input type="radio" class="one" checked="checked" name="radio" value="One" />
  <span class="checkmark"></span>
</label>
<label class="container"
  >Two
  <input type="radio" class="one" name="radio" value="Two" />
  <span class="checkmark"></span>
</label>
<label class="container"
  >Three
  <input type="radio" name="radio" class="one" value="Three" />
  <span class="checkmark"></span>
</label>
<label class="container"
  >Four
  <input type="radio" class="one" name="radio" value="Four" />
  <span class="checkmark"></span>
</label>

<div id="display"></div>
<button onclick="selectedButton()">Submit</button>
0
Nitheesh 23 oct. 2019 a las 09:46

Puede encerrar todo el elemento de entrada en un intervalo y usar parentNode cambiar el color del botón de opción completo

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
      optionContainer[i].style.backgroundColor = "blue";
      optionContainer[i].parentNode.style.backgroundColor = "blue";
      optionContainer[i].parentNode.style.color = "yellow"
    } else {
      optionContainer[i].style.backgroundColor = "";
      optionContainer[i].parentNode.style.backgroundColor = "";
      optionContainer[i].parentNode.style.color = ""
    }
  }
}
<span><input type="radio" name="gender" class="one" value="Male" />Male</span> <br>
<span><input type="radio" name="gender" class="one" value="Female" />Female</span><br>
<span><input type="radio" name="gender" class="one" value="Other" />Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>

Puede encerrar las etiquetas en el espacio y usar nextSibling colorearlas con el botón de opción

function selectedButton() {
  const optionContainer = document.querySelectorAll(".one");
  for (var i = 0; i < optionContainer.length; i++) {
    if (optionContainer[i].checked) {
      document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
      optionContainer[i].style.backgroundColor = "blue";
      optionContainer[i].nextSibling.style.backgroundColor = "blue";
      optionContainer[i].nextSibling.style.color = "yellow"
    } else {
      optionContainer[i].style.backgroundColor = "";
      optionContainer[i].nextSibling.style.backgroundColor = "";
      optionContainer[i].nextSibling.style.color = ""
    }
  }
}
<input type="radio" name="gender" class="one" value="Male" /><span>Male</span> <br>
<input type="radio" name="gender" class="one" value="Female" /><span>Female</span><br>
<input type="radio" name="gender" class="one" value="Other" /><span>Other</span><br>
<div id="display"> </div>
<button onclick="selectedButton()">Submit</button>
0
ellipsis 23 oct. 2019 a las 09:49 
 function selectedButton() {
        const optionContainer = document.querySelectorAll(".one");
        for (var i = 0; i < optionContainer.length; i++) {
            if (optionContainer[i].checked) {
                document.getElementById("display").innerHTML = "You have selected: " + optionContainer[i].value;
                optionContainer[i].style.backgroundColor = "red";
            }
            else {
                optionContainer[i].style.backgroundColor = "";
            }
        }
    }
0
Nasira Mohamed Noufal 23 oct. 2019 a las 09:57
58519625

Preguntas relacionadas

28 ¿Cuál es la mejor manera de agregar opciones a una selección desde como un objeto JS con jQuery?
30 ¿Cómo puedo cambiar la clase de un elemento con JavaScript?
30 ¿Cómo puedo saber qué botón de radio está seleccionado a través de jQuery?
18 En jQuery, ¿cómo selecciono un elemento por su atributo de nombre?
23 Obtenga el valor seleccionado en la lista desplegable usando JavaScript
31 ¿Cómo verificar un botón de radio con jQuery?
14 El controlador de eventos OnChange para el botón de opción (INPUT type = "radio") no funciona como un valor

Nuevas preguntas

2 ¿Qué pasa si usamos solo el bloque "else" para la declaración "if ... else" en javascript?
1 ¿Cuál es el valor más alto de Javascript que se puede usar de forma segura en una máscara de bits?
1 React - Uncaught TypeError: No se puede leer la propiedad "nombre" de indefinido usando Airtable
2 Reaccionar JS Alternar elemento seleccionado
1 ¿Cómo filtrar en una matriz de objetos por el texto proporcionado por el usuario en el cuadro de búsqueda?
1 encontrar la suma de dos elementos de la matriz que es igual a la entrada
2 El componente secundario no se está procesando - Reaccionar
1 TypeError: no se puede leer la propiedad 'count'. de indefinido
2 ¿Por qué la declaración de JavaScript if / else no funciona?
1 La función de resolución de promesas devuelve undefined
Nuevas preguntas con la etiqueta javascript >

javascript

Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.

Más sobre javascript...