Jquery Taking action when 2 inputs are "checked"

November 9, 2021

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>

>Solution :

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>