I have 4 input checkbox elements with the same name 2 / 2. When one changes, I want to change the other. If one is checked, the other must also be checked.
same time; the following "div" should close if both are not "checked" I tried to create an if structure, but without success.
$(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>You need to negate the first condition, according to the comment in the code.
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>