有很多关于动态检查/取消检查复选框的帖子,但我想我的有点不同。 我的复选框是多个值复选框(我用它来参数化图形),其中数据来自查询,例如:
select 'all' as val from dual
union
select name_of_month as val from months
结果是 13 个复选框:[0](全部)[1]-[12](jan feb mar 等)
我想要得到的是以下行为
- 当我选中(全部)时,所有 13 个复选框都会选中
- 当我取消选中(全部)时,所有 13 个复选框都将取消选中
- 当我取消选中 1-12 个复选框之一并且(全部)选中时,将取消选中
- 当所有 12 个复选框都被一一选中时,复选框也会被选中
我不确定上面的描述是否足够清楚,但我相信您感觉到这个复选框应该如何工作
更新: 我是 Oracle DBA(具有 JavaScript 基础知识),尝试在 APEX 中创建一些东西。在我使用向导和鼠标绘制对象之前,这很容易。现在我发现我必须输入几行代码,所以请至少给我一些解释在哪里输入它以及如何运行它才能让它工作。
最佳答案
您可以使用 jquery 轻松完成此操作。我为你的项目制作了示例代码。希望它会有所帮助。
$( document ).ready(function() {
$('.all_chkbox').change(function(){
if($(this)[0].checked){
$('.chkbox').prop("checked", true);
}else{
$('.chkbox').prop("checked", false);
}
});
$('.chkbox').change(function(){
var flag = true;
$('.chkbox').each(function(){
if(!$(this)[0].checked){
flag = false;
return;
}
});
$('.all_chkbox').prop("checked", flag);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="checkbox_wrapper">
<input class="all_chkbox" type="checkbox">
<ul>
<li>checkbox 1 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 2 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 3 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 4 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 5 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 6 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 7 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 8 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 9 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 10 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 11 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 12 <input class="chkbox" type="checkbox" name="" ></li>
<li>checkbox 13 <input class="chkbox" type="checkbox" name="" ></li>
</ul>
</div>
</body>
</html>
关于javascript - 动态选中/取消选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55723596/