3

con este codigo puedo seleccionar una sola opcion. ¿como deselecciono la que seleccion? o volverlas todas blancas

    <div class="panel panel-default">
        <div class="panel-body">
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=1>1
            </label><br />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=2>2
            </label><hr />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=3>3
            </label><br />
        </div>
    </div>

si lo hago en javascript como añado a la estructura:

<html>

<head>
</head>

<body>
</body>

</html
3
  • 2
    Si quieres quitar la selección a un radio debes usar javascript o jquery para eso, usando checkbox podrías seleccionar y desseleccionar las veces que quieras el 9 nov. 2017 a las 15:52
  • @CamiloVasquez como lo haria usando jquery, ?? estoy aprendiendo
    – user63489
    el 9 nov. 2017 a las 15:54
  • 1
    Como te dice @CamiloVasquez has de usar JS, con un boton, o checkbox asociado al codigo para deseleccionar los radiobutton... investiga, intentalo y si tienes problemas , edita la pregunta para explicarlos segun Cómo preguntar para poder ayudarte. Un saludo
    – lois6b
    el 9 nov. 2017 a las 15:54

3 respuestas 3

1
espero te ayude:

<html>
<head>
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script type="text/javascript">

            function unselect() {
                document.querySelectorAll('[name=Tipo]').forEach((x) => x.checked = false);
            }
        </script>
    </head>
<body>
<div class="panel panel-default">
        <div class="panel-body">
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=1>1
            </label><br />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=2>2
            </label><hr />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=3>3
            </label><br />
            <hr/>
            <button id="unselect" onclick="unselect()">Desseleccionar</button>
        </div>
    </div>
</body>

</html>
1

Aquí tienes una forma de anular la selección utilizando javascript, sin ninguna librería.

No tienes más que poner la propiedad checked de cada radio a false:

function unselect(){
  document.querySelectorAll('[name=Tipo]').forEach((x) => x.checked=false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
        <div class="panel-body">
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=1>1
            </label><br />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=2>2
            </label><hr />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=3>3
            </label><br />
            <hr/>
            <button id="unselect" onclick="unselect()">Desseleccionar</button>
        </div>
    </div>

2
  • como lo hago ?? edite la pregunta para adjuntarla en la estructura
    – user63489
    el 9 nov. 2017 a las 15:57
  • 2
    Debes incluir el código javascript en un tag script: <script type="text/javascript">.....</script> Generalmente se suele incluir dentro del <head>. el 9 nov. 2017 a las 16:06
0

Si deseas controlar individualmente tus radio button puedes hacerlo de esta manera:

HTML:

<div class="panel-body">
   <label class="radio-inline">
      <input type="radio" name="Tipo" value=1>1
   </label><br />
   <label class="radio-inline">
      <input type="radio" name="Tipo" value=2>2
   </label><hr />
   <label class="radio-inline">
      <input type="radio" name="Tipo" value=3>3
   </label><br />
   <hr/>
 </div>

Javascript:

<script type="text/javascript">
   let radios = document.querySelectorAll("[type='radio']");
   radios.forEach((x)=>{
     x.dataset.val = x.checked; // guardamos el estado del radio button dentro del elemento
     x.addEventListener('click',(e)=>{
       let element = e.target;
       if(element.dataset.val == 'false'){
         element.dataset.val = 'true';
         element.checked = true;
       }else{
         element.dataset.val = 'false';
         element.checked = false;
       }
     },true);
   });
</scrip>

Lo que estamos haciendo es controlando individualmente cada radio button, guardando su estado anterior y actualizándolo cada vez que hacemos click en el elemento.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies