复选框 选择和取消选择 JavaScript 中的功能
Checkbox Select and Deselect functionality in javascript
我在页面上有一个"全选"复选框,它将取消选择并选中以下复选框。
<div class="field">
<div class="SelectAllCheckBox">
<input type="checkbox" id="SelectAllCheckBox" />
<label for="SelectAllCheckBox">Select All</label>
</div>
</div>
<div id="TargetsPanel" class="panel" style="display: block;">
<div class="body stack-calc">
<table id="TargetsTable" class="tm-list" cellspacing="0">
<colgroup>
<col width="20px">
<col width="20%">
<col>
</colgroup>
<thead>
<tr>
<th></th>
<th> Language </th>
<th> Workflow </th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<span class="LanguageName">Arabic</span>
<ul class="Publications">
<li>
<img alt="" src="/test/tt.png">
<input type="checkbox" id="tcm:0-235-1" name="tcm:0-235-1" checked="checked">
<label for="tcm:0-235-1">Test Arabic</label>
</li>
</ul>
</td>
<td><select name="_1041" disabled=""><option value="1650">Test</option></select></td>
</tr>
<tr>
<td></td>
<td>
<span class="LanguageName">Test Chinese (HongKong)</span>
<ul class="Publications">
<li>
<img alt="" src="/test/mm.png">
<input type="checkbox" id="tcm:0-368-1" name="tcm:0-368-1" checked="checked">
<label for="tcm:0-368-1">Test (Traditional Chinese)</label>
</li>
</ul>
</td>
<td><select name="_1116" disabled=""><option value="1650">Test2</option></select></td>
</tr>
...
...
...//It goes on for other checkboxes.
...
...
</tbody>
</table>
</div>
</div>
现在,我想在所有复选框下方的"全选复选框"复选框上具有选择和取消选择功能。复选框中没有任何常见之处,用于执行映射,除了它们是复选框,我希望这些复选框只有其他复选框会超出界限。
<input type="checkbox" id="tcm:0-235-1" name="tcm:0-235-1" checked="checked">
<input type="checkbox" id="tcm:0-368-1" name="tcm:0-368-1" checked="checked">
....
....
....
谢谢
编辑:
c.SelectAllCheckBox = $("#SelectAllCheckBox"); //I am initializing the existing checkbox id
$evt.addEventHandler(c.SelectAllCheckBox, "click", this.getDelegate(this._onSelectAllCheckBoxClick)); //Here I am adding the event listner
TranslationJob.prototype._onSelectAllCheckBoxClick = function TranslationJob$_onSelectAllCheckBoxClick(headDoc, items)
{
var p = this.properties;
var c = p.controls;
//Here I want code which will deselect and select the checkboxes
};
必填:
该功能应该像选择主时一样工作
试试这个:
$(document).on('click', '#SelectAllCheckBox', function(){
$('.Publications input[type=checkbox]').toggle(this.checked);
});
一旦您单击"全选"复选框,它将选中所有class=Publications
复选框,如果您删除该复选框,则还会取消选中它们。
此外,您可以根据自己的意愿自定义$('.Publications input[type=checkbox]')
选择器,以更改选中/取消选中的复选框
[编辑]
对于纯JavaScript解决方案,请参阅我的另一个答案
纯JavaScript解决方案:)
小提琴:http://jsfiddle.net/6sxxZ/6/
function get_checkboxes() {
var cboxes = [];
var tbl = document.getElementById('TargetsTable');
var tbody = tbl.getElementsByTagName('tbody')[0];
var trs = tbody.getElementsByTagName('tr');
var cbox;
for (var i = 0; i < trs.length; i++) {
cboxes.push(cbox = trs[i].getElementsByTagName('input')[0]);
}
return cboxes;
}
var _cboxes = get_checkboxes();
for (var i = 0; i < _cboxes.length; i++) {
_cboxes[i].onchange = function () {
var __cboxes = get_checkboxes();
var all_checked = true;
for (var j = 0; j < __cboxes.length; j++) {
if (!__cboxes[j].checked) {
all_checked = false;
break;
}
}
document.getElementById('SelectAllCheckBox').checked = all_checked;
}
};
document.getElementById('SelectAllCheckBox').onchange = function () {
var cboxes = get_checkboxes();
for (var i = 0; i < cboxes.length; i++) {
cboxes[i].checked = this.checked;
}
};
jquery solution:
编辑:原始问题接受了jQuery解决方案
fiddle:http://jsfiddle.net/WF74Y/3/
$('#SelectAllCheckBox').change(function () {
$('div#TargetsPanel table#TargetsTable tr input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});
一个纯粹的JavaScript解决方案
var selectAll = document.querySelector('#SelectAllCheckBox');
function checkUncheck() {
var checkboxes = document.querySelectorAll('.Publications input[type=checkbox]');
for (var checkbox in checkboxes) {
if (!checkboxes.hasOwnProperty(checkbox)) continue;
if (selectAll.checked) {
checkboxes[checkbox].checked = true;
} else {
checkboxes[checkbox].checked = false;
}
}
}
function uncheck(){
selectAll.checked = false;
}
现在,我们需要将这两个函数添加到事件中。我选择使用内联事件,它以这种方式完成:
添加
onclick
回调以调用checkUncheck()
以#SelectAllCheckBox
添加
onclick
回调以调用uncheck
所有其他复选框
你可以使用不显眼的javascript并添加EventHandlers来做同样的事情。
这是Jsfiddle在工作中展示它:
- JSfille 演示
希望对你有帮助
PS:仅供参考,我已经使用querySelector/querySelectorAll
API导致更干净的节点,并且在所有现代浏览器中都得到了很好的支持。 它只是不适用于旧版浏览器的IE6/IE7。
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- JavaScript/jQuery:获取选择功能在Firefox和Chrome中不起作用
- JavaScript选择功能
- 如何使用OpenLayers以编程方式选择功能
- 具有悬停延迟的 OpenLayers 选择功能控件
- 如何根据属性选择功能
- 如何在UI选择菜单中为每个选项指定选择功能
- 谷歌地图API V3与图标类型和选择功能
- D3js 从 geojson 中选择功能
- 具有时区选择功能的 AngularJS 日期选择器
- JQuery自动完成下拉选择功能
- 自定义选择功能,复制到剪贴板纯JS
- 用户选择功能
- 复选框快速选择功能不正常
- Jquery选择功能自动年龄的生日,而不是输入类型日期
- 在OpenLayers 3中选择功能时是否有事件
- HTML/JavaScript多项选择测验:设置标题和答案选择功能
- 如何使用 AngularJS/Ionic 中现有的章节选择功能
- 自动关闭选择功能
- Jquery自动完成选择功能