jQuery: hacer que las casillas de verificación actúen como botones de radio?

¿Hay alguna manera de hacer que las casillas de verificación actúen como botones de radio? ¿Supongo que esto podría hacerse con jQuery?

      

Si se marcaba una casilla, los otros en el grupo se desmarcarían.

 $("input:checkbox").click(function(){ var group = "input:checkbox[name='"+$(this).attr("name")+"']"; $(group).attr("checked",false); $(this).attr("checked",true); }); 

Esto lo hará, aunque estoy de acuerdo que esta podría ser una mala idea.

Ejemplo en línea: http://jsfiddle.net/m5EuS/1/

ACTUALIZAR la separación de grupo adicional.

Actualizado para Jquery 1.9 – use .prop() lugar de .attr()

 $("input:checkbox").click(function(){ var group = "input:checkbox[name='"+$(this).prop("name")+"']"; $(group).prop("checked",false); $(this).prop("checked",true); }); 

Aquí hay un ejemplo: http://jsfiddle.net/m5EuS/585/

Quizás quieras considerar un enfoque diferente. Creo que quieres darle estilo al botón de radio para que parezca una checkbox. Si es así, mira: esta búsqueda de Google

Y a continuación hay un ejemplo simplificado que tomo prestado de http://www.thecssninja.com.

Para decirlo simplemente: oculta el botón de opción real (consulte la entrada css [tipo = radio]) y le da estilo a la etiqueta del botón de radio correspondiente para mostrar la checkbox personalizada (desde el sprite css en la imagen de fondo en la entrada [tipo = radio] + etiqueta) y cambia a un sprite diferente en el fondo cuando el botón de radio está en estado verificado. Ejecución de ejemplo aquí: http://jsfiddle.net/jchandra/R5LEe/

       Custom CSS3 control facade    Custom control images and concept from www.thecssninja.com


básicamente la misma respuesta que @amosrivera, pero elimine la desmarcación de todas las casillas de verificación según sea necesario. en su lugar use .not ()

  $("input:checkbox").click(function(){ var group = "input:checkbox[name='"+$(this).prop("name")+"']"; $(group).not(this).prop("checked",false); }); 

Si aplica clase a la checkbox, puede lograr fácilmente la funcionalidad de botón de radio con el siguiente fragmento de código:

 $(".make_radio").click(function(){ $(".make_radio").not(this).attr("checked",false); }); 

Yo comentaría pero no tengo el representante. Use .change, not. Haga clic para acceder y así funciona con el teclado, así:

  jQuery(".radio-check-box").change( function() { var checked = jQuery(this).prop("checked"); jQuery(".radio-check-box").attr("checked", false); jQuery(this).prop("checked", checked); } ); 

Actualizó el guión (a través de la respuesta de Tomislav) por lo que también puede desmarcar TODAS las casillas de verificación. Acabo de agregar un .not (esto) y eliminé la línea donde está marcada la casilla actual.

 $('form').each(function() { // iterate forms var $this = $(this); $this.find('input:checkbox').click(function() { var group = 'input:checkbox[name="' + $(this).attr('name') + '"]'; $this.find(group).not(this).attr('checked', false).prop('checked', false); // also use prop, for real Property change }); }); 

http://jsfiddle.net/kya0639w/

Si selecciona “$ (” input: checkbox “)” seleccionará toda la checkbox para que pueda especificar el botón de opción diferente usando su nombre.

  $("[name='sname1']").click(function(){ var group = "input:checkbox[name='"+$(this).attr("name")+"']"; $(group).prop("checked",false); 

El siguiente ejemplo explicará

  $("[name='sname1']").click(function(){ var group = "input:checkbox[name='"+$(this).attr("name")+"']"; $(group).prop("checked",false); $(this).prop("checked",true); }); 
  
  (OR)  



Use el evento de cambio de la checkbox y asigne el valor marcado para la checkbox seleccionada actualmente:

  $("input[type=checkbox]").change(function() { $("input[type=checkbox]").prop('checked',false); $(this).prop('checked',true); }); 
 .checkBoxb{ float:left; clear:both; } 
      

Actualicé el script Fiddle, jQuery faltaba. Ahora con prop y attr (usa ambos).

 $('form').each(function() { // iterate forms var $this = $(this); $this.find('input:checkbox').click(function() { var group = 'input:checkbox[name="' + $(this).attr('name') + '"]'; $this.find(group).attr('checked', false).prop('checked', false); // also use prop, for real Property change $(this).attr('checked', true).prop('checked', true); // also use prop, for real Property change }); }); 

Violín

La solución dada no se preocupa por el estado inicial, que es diferente del comportamiento de los botones de radio. Además, también desencadena un evento de cambio al hacer clic en una entrada ya verificada.

 var $elements = $('input:checkbox'); // Allow only one input to be selected $elements.filter(':checked:not(:last)').prop('checked', false); // Get selected input var selected = $elements.filter(':checked')[0] || {}; // Handle event $(document).on('click', 'input:checkbox', function(e) { if (e.currentTarget === selected) { e.preventDefault(); } else { selected.checked = false; selected = e.currentTarget; } }); 
      
Intereting Posts