如何在不同的 div 中有两个单独的复选框，同时选中和取消选中？ [复制]答案

【问题标题】：How to have two separate checkboxes in different divs, become checked and unchecked simultaneously? [duplicate]如何在不同的 div 中有两个单独的复选框，同时选中和取消选中？ [复制]
【发布时间】：2020-05-21 17:00:10
【问题描述】：

我创建了两个启用暗模式的复选框。我有一个在移动导航中，一个在桌面导航中。

在800px，移动复选框变为display:none，桌面复选框变为display:block，反之亦然，在800px之前。

如果我从桌面开始，启用暗模式并转到移动设备，则未选中移动复选框，当我选中它时，亮模式有效，但桌面复选框现在指的是相反的。

我目前正在尝试同时选中两个复选框并在单击输入时将它们标记为':checked'。

我的问题是，当复选框为 display:none 且当前不在 DOM 中时，您无法将复选框标记为选中？

Codepen here.

$(document).ready(function() {

  $('input[type="checkbox"]').on('click', () => {

    $('body').toggleClass('darkMode');

    $('mobile-checkbox').is(':checked');
    $('desktop-checkbox').is(':checked');

  });

});

.darkMode {
  background-color: black;
}

.mobile {
  display: inline-block;
  box-shadow: 5px 5px 5px blue;
}

.desktop {
  display: none;
  box-shadow: 5px 5px 5px green;
}

@media (min-width:800px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: inline-block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="mobile">
    <input class="mobile-checkbox" type="checkbox">
  </div>

  <div class="desktop">
    <input class="desktop-checkbox" type="checkbox">
  </div>
</body>

【问题讨论】：

$('mobile-checkbox').is(':checked'); 只返回真或假。 $('mobile-checkbox').prop('checked', true/false); 将改变状态。另请记住，您的移动和桌面复选框选择器无效。您缺少 . 类表示
旁注；如果保证选择器只返回一个结果，而不是使用is(':checked')，只需使用prop('checked') 来访问属性而不是使用伪选择器来评估元素
添加相同的name 属性到输入
Dude... 代码中的问题是应用了样式您无法访问具有样式 display:none 的 HTML 元素...您可以使用 visibility:hidden 访问 Dom 中的 HTML 元素它会起作用
@abhijeetabanave 你在说什么？一个元素是可见的。如果媒体查询适用，则可见性交换。但是一个会是可见的。此外，可见性不会改变 javascript 在 dom 中找到它们的能力。

标签： javascript jquery html css checkbox

【解决方案1】：

代码可能看起来更好，但这里有一个简单的解决方案：

$( document ).ready(function() {
  var $checkboxes = $('input[type="checkbox"]');
    $checkboxes.on('change', function(){
      if(this.checked){
        $('body').addClass('darkMode');
        $checkboxes.prop('checked', true);
      }
      else{
        $('body').removeClass('darkMode');
        $checkboxes.prop('checked', false);
      }
    });
});

它的作用：

在更改时，检查选中输入的值，并将相同的值应用于所有复选框。

不要在这里使用arrow function，因为我们需要this

【讨论】：

【解决方案2】：

您只需将属性设置为选中以匹配已更改的选中状态。我添加了一个控制台日志，以便您可以看到反映的更改。我还为两个复选框添加了一个通用类，以使选择更容易。

$(document).ready(() => {
  let $body = $(document.body);
  let $viewSelectors = $('.view-selector').on('click', e => {
    $body.toggleClass('darkMode');
    $viewSelectors.prop('checked', e.target.checked);
    
    console.log($viewSelectors.map((index, it) => it.checked).get());
  });
});

.darkMode {
  background-color: black;
}

.mobile {
  display: inline-block;
  box-shadow: 5px 5px 5px blue;
}

.desktop {
  display: none;
  box-shadow: 5px 5px 5px green;
}

@media (min-width:800px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: inline-block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mobile">
  <input class="mobile-checkbox view-selector" type="checkbox">
</div>

<div class="desktop">
  <input class="desktop-checkbox view-selector" type="checkbox">
</div>

【讨论】：