Casilla de verificación dependiente, ¿crees que esto se puede simplificar más?

Tengo el siguiente código que funciona, me preguntaba si esto puede simplificarse más.

Demostración: http://jsfiddle.net/TnpNV/8/

<form name="cbform">
<input type="checkbox" value="1" name="one" id="one" /> one<br />
<input type="checkbox" value="1" name="two" id="two" /> two
</form>​

<script>
$('#one, #two').click(function(event) {
    var checked = $(this).is(':checked');
    if (checked) {
        $('#one').attr('checked', true);
        $('#two').attr('checked', true);
    }
    else {
        $('#one').attr('checked', false);
        $('#two').attr('checked', false);
    }
});
</script>

Es básicamente una casilla de verificación de dos que depende uno del otro. Se usó Jquery para marcarlos y desmarcarlos.

saludos

preguntado el 04 de julio de 12 a las 04:07

3 Respuestas

DEMO compacto más funcional http://jsfiddle.net/U5GfF/ or http://jsfiddle.net/U5GfF/3/

Esta es la versión de línea mínima que puede obtener para su código: es decir

this.checked regresará true e false y descansar en el evento de clic prop establecerá checked propiedad en consecuencia. :)

Espero que esto ayude,

código

$("#one, #two").click(function() {
    $("input").prop('checked', this.checked);
});

o

$("#one, #two").click(function() {
    $("#one, #two").prop('checked', this.checked);
});

or 

$("#one, #two").on('click', function() {
    $("#one, #two").prop('checked', this.checked);
});

Respondido 04 Jul 12, 04:07

¿Qué pasa si tienes más de 2 entradas? no solo los que hay que comprobar, como por ejemplo texto de entrada, botón, etc... - Óscar Jara

@OscarJara genial, dame una situación que te hará una demostración mire aquí: en caso de casillas de verificación de mayo. DEMO jsfiddle.net/pJ7jY :) - tatuajes_innit

+1 ¡Bien! El segundo es mejor, pero no mezcle las cosas, si está usando prop(), será mejor usar ".on('click' function(e){});" y no solo ".click(function(e){});" como las versiones antiguas de jQuery hacen que puedas usar prop(), on(), etc... :-) - Óscar Jara

@GregPettit ¡Gracias, también eres una leyenda! :) - tatuajes_innit

puedes usar prop() método:

$('#one, #two').click(function(event) { // or $("input:checkbox")
    if ($(this).is(':checked')) {
        $('#one, #two').prop('checked', true); // or $("input:checkbox")
    } else {
        $('#one, #two').prop('checked', false);
    }
});

De demostración

Respondido 04 Jul 12, 04:07

según la respuesta de Oscar, podrías intercambiar prop para attr si necesita admitir versiones anteriores. - Greg Petit

¡Echa un vistazo a la versión mucho menor a continuación en mi publicación! :PAGS - tatuajes_innit

Prueba esto, solo 2 líneas :-)

Demostración:

http://jsfiddle.net/TnpNV/15/

Para las versiones modernas de jQuery:

$('#one, #two').on('click', function(e) {
  var prop = ($(this).is(':checked')) ? true : false;
  $('#one, #two').prop('checked', prop);
});​

Para versiones antiguas de jQuery (Porque vi en su jsFiddle que está usando la versión jQuery 1.4.4) Además, este código funcionará en todas las versiones.

$('#one, #two').click(function(e) {
  var prop = ($(this).is(':checked')) ? true : false;
  $('#one, #two').attr('checked', prop);
});

Respondido 04 Jul 12, 04:07

No soy un gran admirador de los operadores ternarios; hay menos líneas de código, pero personalmente no creo que eso lo haga "simplificado". Sin embargo, una solución excelente y compacta que reconoció prop vs. attr, ¡así que de todos modos recibe un voto positivo de mi parte! - Greg Petit

@GregPettit Creo que es la mejor manera de simplificar como dijo OP, gracias también por su agradecimiento :-) - Óscar Jara

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.