如何用JavaScript / jQuery选择/取消选择带有复选框的选项？
如何用JavaScript / jQuery选择/取消选择带有复选框的选项？
提问于 2019-11-29 19:13:38
我对JavaScript或jQuery几乎一无所知。
我需要在<select>中选择/取消选择一个选项，单击复选框或按钮时可以选择多个选项。
复选框需要选中/取消选中具有相同值的选项。我的想法是这样的：
$(document).ready(function() {
var input = $('#entry-select');
var checkboxes = $('.entrycheckbox');
checkboxes.click(function() {
var element = $(this);
var value = element.val();
input.val(value);
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
这只会选择具有上次单击复选框的值的选项，而不是选中哪些复选框，并且会取消选择其他所有选项。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-29 19:17:02
您只需为val()提供最后选中的复选框的值。要使其按您的要求工作，您需要构建一个包含所有选中复选框的数组，并将其提供给val()。
为此，您可以使用filter()获得选中的复选框，然后使用map()构建阵列：
input.val(checkboxes.filter(':checked').map((i, el) => el.value));
$(document).ready(function() {
var $input = $('#entry-select');
var $checkboxes = $('.entrycheckbox');
$checkboxes.click(function() {
$input.val($checkboxes.filter(':checked').map((i, el) => el.value));
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
如果您不希望用户直接更改所选的readonly，则可能还需要考虑将option添加到select中。
Stack Overflow用户
发布于 2019-11-29 19:22:00
<script type="text/javascript">
$(document).ready(function(){
$('.entrycheckbox').click(function(){
$(":entrycheckbox").each(function(){
if($(this).val()==1){
$(this).attr("checked","checked");
}
});
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59103729
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号