Jquery在“檢查”2個輸入時采取行動

我有 4 個輸入復選框元素，名稱相同 2 / 2。當一個更改時，我想更改另一個。如果檢查了一個，則還必須檢查另一個。

同時; 如果兩者都沒有“檢查”，則以下“div”應該關閉 我試圖創建一個 if 結構，但沒有成功。

$(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>

uj5u.com熱心網友回復：

根據代碼中的注釋，您需要否定第一個條件。

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>

標籤：javascript html 查询 css

上一篇：使用子查詢或更好的替代方法在事實表中進行SQL過濾計數

下一篇：獲取列位置（如第一、第二等）