时间戳

首页 > 解决方案 > 如何在不同的 div 中有两个单独的复选框，同时选中和取消选中？

javascript - 如何在不同的 div 中有两个单独的复选框，同时选中和取消选中？

问题描述

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

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

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

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

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

代码笔在这里。

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

标签： javascriptjqueryhtmlcsscheckbox

解决方案

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

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

推荐阅读