Seleccionar varias ID's - Ambas casillas de verificación deben ser seleccionadas

Question

¿Hay alguna manera de que se requiera que se revisen dos o más identificaciones antes de hacer algo?

Por ejemplo:

Si AMBOS Casilla 1 y Checkbox 2 se comprueban entonces el evento ocurre.

Pero si solo uno o el otro son revisados ​​por ellos mismos, sucede algo más.

Pensé que esto funcionaría, pero no.

function toggleStatus() { 
    if ($('#checkbox1 #checkbox2').is(':checked')) { 
$('.option1 :input').attr('checked', true); 
    } else { 
$('.option1 :input').attr('checked', false); 
} 

function toggleStatus() { 
    if ($('#checkbox1').is(':checked')) { 
$('.option2 :input').attr('checked', true); 
    } else { 
$('.option2 :input').attr('checked', false); 
} 

function toggleStatus() { 
    if ($('#checkbox2').is(':checked')) { 
$('.option3 :input').attr('checked', true); 
    } else { 
$('.option3 :input').attr('checked', false); 
} 

Espero que explique esto correctamente. He buscado durante tres días y estoy atascado. ¡Gracias por cualquier ayuda!

Answer 1

Me gustaría dar a las casillas de verificación una clase común. A continuación, utilícelo como selector y cuente los valores comprobados. Entonces, si dos están marcados, haga algo. Si uno está marcado, entonces verifique el valor de ese y haga lo que necesite en consecuencia.

EDIT: Así dice por ejemplo que ha asignado una clase común de myCheckBoxes

Por lo que podría hacer lo siguiente pseudo código:

var myCheckBoxes = $('.myCheckBoxes:checked') //not sure on selector 

if (myCheckBoxes.length == 2) 
    //do something because both are checked 
else if (myCheckBoxes.length == 1) 
{ 
    if (myCheckBoxes.val() == "A") 
     // do something because A was checked 
    else if (myCheckBoxes.val() == "B") 
     // do something because B was checked 
} 

Answer 2

$('#checkbox1, #checkbox2').change(function() { 
    if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { 
     // Do some stuff if both boxes are checked... 
    } 
}); 

Answer 3

$(document).ready(function() { 
    var check1 = $("#check1"); 
    var check2 = $("#check2"); 

    // this method decides what to do when a checkbox is clicked 
    var trigger_event = function() { 
     if (check1.attr("checked") && check2.attr("checked")) { 
      event1(); 
     } 
     else if (check1.attr("checked") && !check2.attr("checked")) { 
      event2(); 
     } 
     else if (!check1.attr("checked") && check2.attr("checked")) { 
      event3(); 
     } 
    }; 

    // append event 
    check1.click(function() { 
     trigger_event(); 
    }); 

    check2.click(function() { 
     trigger_event(); 
    }); 

}; 

Answer 4

var ids = ['#checkbox1', '#checkbox2'], 
    $chx = $(ids.join(',')), 
    count = $chx.length; 

$chx.on('change', function() { 
    if ($chx.filter(':checked').length === count) { 
     // do stuff 
     console.log('all true'); 
    } 
}); 

Si las casillas de verificación son envuelto por algún elemento:

<div class="check-group"> 
    <label><input id="checkbox1" type="checkbox"> one </label> 
    <label><input id="checkbox2" type="checkbox"> two </label> 
</div> 

A continuación, el elemento de envoltura puede tener el detector de eventos:

$('.check-group').each(function() { 

    var $this = $(this), 
     $chx = $this.find('input[type=checkbox]'), 
     count = $chx.length; 

    if (count === 0) { 
     return; 
    } 

    $this.on('change', function() { 
     if (count === $chx.filter(':checked').length) { 
      console.log('all checked'); 
     } 
    }); 
}); 

Answer 5

me daría tanto (o tantos como desee) la misma clase = 'chk_option'. Si está utilizando jQuery, entonces se podría hacer esto:

function isSelectedBoth(){ 
    var result = true; 
    $('.chk_option').each(function(){ 
     if(!$(this).is(':checked')) 
      result=false; 
    }); 
    return result; 
} 

Cuando se está definiendo la de eventos de clic para cada simplemente hacer esto:

$('.chk_option').change(function(e){ 
    if (isSelectedBoth()){ 
    // do something if both are selected 
     alert('both checkboxes are selected'); 
    }else{ 
    // do something if not 
     alert('You must select both checkboxes'); 
    } 
}); 

Puede hacerlo incluso con la función inteligente que isSelectedBoth() donde podría devolver algo más útil que verdadero/falso, como el número de orden del cuadro no/marcado, una matriz de elementos un/checked etc.

Answer 6

Boolean logic ftw! Así que estoy bastante seguro de que estás buscando lo que se conoce como el exclusivo o, o XOR. Esto significa que si solo un operando es verdadero, la expresión completa será verdadera. Si ninguno de los operandos es verdadero o si ambos son verdaderos, la expresión completa se evaluará como falsa. El operador para esto es ^. Así que aquí está el código (préstamos de Chris como el formato básico) ...

$('#checkbox1, #checkbox2').change(function() { 
    if($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { 
     // Both are checked 
    } 
    else if($('#checkbox1').is(':checked')^$('#checkbox2').is(':checked')) { 
     // Exactly one is checked 
    } 
}); 

En realidad, sólo es necesario un OR para la segunda if ya que estamos utilizando un else if y la primera if cubre cuando ambos están comprobado. Pero no es tan genial y obviamente no se puede usar por sí mismo para hacer lo mismo (y es mejor para minimizar * tos de tos *).

¡Disfrútalo!

Answer 7

Hay dos cuestiones en su código:

1. que estés utilizando $('#checkbox1 #checkbox2') para seleccionar las dos casillas de verificación, pero sin una coma que es una “ancestor descendant” selector y no un multiple selector

2. el operador is() devuelve true si al menos un de los elementos seleccionados coincide con los argumentos dados. Por lo tanto, si se utiliza if ($('#checkbox1, #checkbox2').is(':checked')) esto es cierto siempre que cualquiera de ellos (pero no necesariamente ambos) casillas de verificación se comprueban

Así, con el fin de hacer algo cuando ambos casillas de verificación se comprueban necesita utilizar is(':checked') en tanto por separado , como en the top-voted answer.

que aquí hay una prueba donde se muestran el comportamiento is()

$('input').on('change', function(ev) { 
 
    if ($('#checkbox1, #checkbox2').is(':checked')) { 
 
    console.log("is(':checked') true because at least one is checked"); 
 
    } else { 
 
    console.log("is(':checked') not true"); 
 
    }; 
 
    if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { 
 
    console.log("both checked"); 
 
    } 
 
});

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

 
<label><input type="checkbox" id="checkbox1"/>checkbox1<label> 
 
<label><input type="checkbox" id="checkbox2"/>checkbox2</label>