如何在不同的 div 中有两个单独的复选框，同时选中和取消选中？ [复制]
Posted
技术标签:
【中文标题】如何在不同的 div 中有两个单独的复选框，同时选中和取消选中？ [复制]【英文标题】：How to have two separate checkboxes in different divs, become checked and unchecked simultaneously? [duplicate] 【发布时间】：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 中找到它们的能力。
【参考方案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>【讨论】：
以上是关于如何在不同的 div 中有两个单独的复选框，同时选中和取消选中？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章