Tengo 4 elementos de casilla de verificación de entrada con el mismo nombre 2/2. Cuando uno cambia, quiero cambiar el otro. Si uno está marcado, el otro también debe estar marcado.
Mismo tiempo; el siguiente "div" debería cerrarse si ambos no están "marcados". Intenté crear una estructura if, pero sin éxito.
$(document).ready(function() { $('.control').change(function() { let changedName = $(this).attr('name'); $("."+changedName).slideToggle(); let isCheckBox = $("input[name="+changedName+"]"); $(isCheckBox).prop('checked', this.checked); //biri "checked" olduğunda, aynı isme sahip diğer elemanı da "checked" yapıyorum let ischecked = $("input[name=changer-one]").is(':checked'); // I tried to check here, I tried getting true and false values let ischeckedTwo = $("input[name=changer-two]").is(':checked'); // I tried to check here, I tried getting true and false values if (ischecked || ischeckedTwo) { // ".options" will appear when one of them is not "checked" $(".options").fadeIn(300); } else if (ischecked && ischeckedTwo) { // ".options" will be hidden when both are "checked" $(".options").fadeOut(300); }; }); }); .options { display:none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content-changer"> <label> <input name="changer-one" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <div class="content-changer"> <label> <input name="changer-one" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <br><br> <div class="content-changer"> <label> <input name="changer-two" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <div class="content-changer"> <label> <input name="changer-two" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <div class="options"> Lorem ipsum dolor </div>Debe negar la primera condición, de acuerdo con el comentario en el código.
if(!ischecked || !ischeckedTwo){ ... } $(document).ready(function() { $('.control').change(function() { let changedName = $(this).attr('name'); $("." + changedName).slideToggle(); let isCheckBox = $("input[name=" + changedName + "]"); $(isCheckBox).prop('checked', this.checked); //biri "checked" olduğunda, aynı isme sahip diğer elemanı da "checked" yapıyorum let ischecked = $("input[name=changer-one]").is(':checked'); // I tried to check here, I tried getting true and false values let ischeckedTwo = $("input[name=changer-two]").is(':checked'); // I tried to check here, I tried getting true and false values if (!ischecked || !ischeckedTwo) { // ".options" will appear when one of them is not "checked" $(".options").fadeIn(300); } else if (ischecked && ischeckedTwo) { // ".options" will be hidden when both are "checked" $(".options").fadeOut(300); }; }); }); .options { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="content-changer"> <label> <input name="changer-one" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <div class="content-changer"> <label> <input name="changer-one" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <br><br> <div class="content-changer"> <label> <input name="changer-two" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <div class="content-changer"> <label> <input name="changer-two" class="control" type="checkbox" checked /> <div><span></span></div> </label> </div> <div class="options"> Lorem ipsum dolor </div>