Desmarque una casilla de verificación cuando otra esté marcada

5 minutos de lectura

avatar de usuario
YMA981

function uncheck() {
  var notTest = document.getElementById("choice_31_3_2");
  var Test = document.getElementById("choice_31_3_1");

  if (notTest.checked) {
    Test.checked = false;
  }
  if (Test.checked) {
    notTest.checked = false;
  }
}

jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    

<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Escribí una función para desmarcar una casilla de verificación si otra está marcada, estoy usando jQuery para llamar a desmarcar() en esa entrada específica.

Estoy obteniendo el resultado que quiero. Cuando verifico la prueba, luego verifico notTest, la prueba está desmarcada. PERO cuando presiono Prueba nuevamente, la casilla de verificación de prueba se niega a marcar a menos que desmarque manualmente notTest.

Incluí el fragmento de código, ¿puede averiguar qué está mal?

El código se ejecuta normalmente en WordPress, pero lamentablemente no aquí.

  • "message": "SyntaxError: expected expression, got '<'", – su fragmento de código no es ejecutable, no lo convierta en un fragmento de código – o elimine el HTML en el panel de javascript

    – Jaromanda X

    3 de noviembre de 2017 a las 5:26


  • ¿Sabe por qué apareció este SyntaxError, se tomó el consejo y se eliminó el fragmento?

    – YMA981

    3 de noviembre de 2017 a las 5:58

  • porque pones <script> en el cuadro de javascript

    – Jaromanda X

    3 de noviembre de 2017 a las 6:00

  • ok, gracias la próxima vez no lo haré cuando esté usando editores js en línea

    – YMA981

    3 de noviembre de 2017 a las 6:07

avatar de usuario
Shiladitya

Aquí tienes una solución.

$('input[type="checkbox"]').change(function(){
  console.log($(this).is(':checked'));
  if($(this).is(':checked')){
    $(this).siblings('input[type="checkbox"]').attr('checked', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Espero que esto te ayudará.

  • los if declaración es redundante. siempre será cierto.

    – chico mograbi

    3 de noviembre de 2017 a las 5:40

  • @guymograbi if la declaración no es redundante, verifique la consola ahora, he editado la respuesta por usted.

    – Shiladitya

    3 de noviembre de 2017 a las 5:43

avatar de usuario
Sunil Dora

Puedes codificar así,

 HTML:- 
 <input type="checkbox" class="example" />
 <input type="checkbox" class="example" />
 <input type="checkbox" class="example" />
 <input type="checkbox" class="example" />
 JQUERY:- 
 $('input.example').on('change', function() {
     $('input.example').not(this).prop('checked', false);  
 });

Demostración de trabajo URL

Espero que esto te ayudará.

  • Gracias Sunil por la solución, solo quiero 2 casillas de verificación de 5, no todas, habría usado un botón de opción, quiero que el usuario elija varias casillas de verificación pero no puede elegir específicamente entre 2 específicas, así que necesito para trabajar en id no clase

    – YMA981

    3 de noviembre de 2017 a las 6:01

  • Lo siento, pero la demostración que proporcionó no tiene nada en común con su respuesta.

    – tagaísmo

    1 de mayo de 2020 a las 8:48


PERO cuando presiono Probar nuevamente, la casilla de verificación de prueba se niega a verificar a menos que desmarque manualmente notTest.

Es porque cuando presionas de nuevo, no marcó en qué casilla de verificación hizo clic. Simplemente desmarcó una casilla marcada.

Pruebe este enfoque simple

var allIds = [ "choice_31_3_1", "choice_31_3_2" ];
function uncheck( event ) 
{
   var id = event.target.id;
   allIds.forEach( function( id ){
      if ( id != event.target.id )
      {
         document.getElementById( id ).checked = false;
      }
   });
}

jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

  • Gracias gurvinder por la solución y explicación.

    – YMA981

    3 de noviembre de 2017 a las 6:04

Prueba esto.

$('input.test').on('change', function() {
    $('input.test').not(this).prop('checked', false);  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox" class="test">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox" class="test">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Usando JS: cambie su función a esto:

$(function(){
 function uncheck(e) {
    var isElemChecked = e.target.checked;

    // Return if the element was being unchecked
    if(!isElemChecked){
      return;
    }

    $('input').prop('checked',!isElemChecked);
    $(e.target).prop('checked',isElemChecked);
  }

jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);
})

Usando CSS (sin necesidad de código JS): Cambie sus entradas a type=radio y actualice el css como

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
}

<input name="input_3" value="Test" id="choice_31_3_1" type="radio">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3" value="notTest" id="choice_31_3_2" type="radio">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Tenga en cuenta que el enfoque CSS no funcionaría en IE.

https://plnkr.co/edit/o7dft84Cm4tA3GUOLt4y?p=preview

 function uncheck() {
    if (this.checked){ // support unchecking
     $('input').prop('checked',false);
     this.checked = true
    }
  }

Debe saber qué elemento desencadenó el evento para poder resolverlo correctamente.

Una forma de resolverlo es la función que muestro arriba: simplemente marque todas las casillas de verificación como falsas, luego marque this – el elemento que desencadenó el evento – a verdadero.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad