Javascript选中一个表中的所有复选框,该表的行具有样式显示标记
Javascript select all checkboxes in a table whose rows have a style display tag
我有一个简单的文本过滤器(未显示),它为表中的所有行提供"none"或"table row"的显示属性。我试图让我的"全选"脚本只选中可见的框,但我当前的代码会检查所有内容,而不考虑可见性。
如何只检查可见的?
<html>
<head>
<script>
function checkAll(checktoggle)
{
var checkboxes = new Array();
checkboxes = document.getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
</head>
<body>
<table class="sample">
<tbody><tr><td>#</td>
<td>Topic</td>
<td>Number</td>
<td>Checkbox</td></tr>
<tr style="display: table-row;"><td>1</td>
<td>Math</td>
<td>404</td>
<td><input type="checkbox" name="f1" value="1"></td></tr>
<tr style="display: none;"><td>2</td>
<td>Science</td>
<td>1,283</td>
<td><input type="checkbox" name="f2" value="1"></td></tr>
<tr style="display: table-row;"><td>3</td>
<td>Programming</td>
<td>1,465</td>
<td><input type="checkbox" name="f3" value="1"></td></tr>
</table>
<a onclick="javascript:checkAll(true);" href="javascript:void();">check all</a>
<a onclick="javascript:checkAll(false);" href="javascript:void();">uncheck all</a>
</body>
</html>
这是将弹出您想要的的代码
<script>
function checkAll(checktoggle)
{
var checkboxes = new Array();
checkboxes = document.getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
alert(checkboxes[i].parentNode.parentNode.style.display)
checkboxes[i].checked = checktoggle;
}
}
}
</script>
这可能有效:
function checkAll(checktoggle)
{
var checkboxes = new Array();
checkboxes = document.getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
var cs = window.getComputedStyle(checkboxes[i],"");
if (cs.display != "none" && checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
请参阅JavaScript最终指南,第16.4节"查询计算样式"。
检查前检查是否可见。
if (checkboxes[i].is(":visible")){
checkboxes[i].checked = checktoggle;
}
此代码将选中"仅可见"复选框。
您可以检查每一行的高度。如果高度>0,则该行可见。
var trElements = document.getElementsByTagName('tr');
var checkboxes = document.getElementsByTagName('input');
for (var row =1, rowCount = trElements.length -1 ; row < rowCount; row++) {
if (trElements[row].offsetHeight > 0) { // This item is visible
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
您可以使用hidden
布尔值:
function checkAll(checktoggle){
var checkboxes = new Array();
checkboxes = document.getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
if(checkboxes[i].hidden != true){ //Checks if the element is hidden
checkboxes[i].checked = checktoggle;
}
}
}
}
function checkAll(checktoggle)
{
var tableRows = document.querySelectorAll('tr');
for (var i=0; i < tableRows.length; i++) {
var tableRow = tableRows[i];
var display = getComputedStyle(tableRow).getPropertyValue("display");
if (display !== 'none') {
var checkbox = tableRow.querySelector('input');
if (checkbox.type === 'checkbox') {
checkbox.checked = checktoggle;
}
}
}
}
相关文章:
- 应用程序在呈现Jquery Mobile之前显示无样式的Html
- 避免在用ng href加载样式表之前显示内容
- 在javascript中将样式显示从none更改为block
- PHP,MySQL,AJAX-调用AJAX结果后,Bootstrap CSS样式不会显示
- 如何使活动菜单项具有突出显示样式
- Javascript选中一个表中的所有复选框,该表的行具有样式显示标记
- ASP.Net VB - 显示数据折叠样式
- 如何检查与显示:无样式相关的文本内容
- Jquery/JS:通过样式显示显示选择框(无,块)
- 带有样式显示的 Div:表格的高度错误
- Javascript/JQuery 如果样式显示值等于
- 循环遍历数组并以表格样式显示结果
- 如何使PHP/JavaScript错误弹出窗口以正确的样式显示
- 如果所有li子元素都具有CSS样式显示,则隐藏父元素:none
- 样式显示:没有在IE8、IE9、IE10兼容性视图中不起作用
- 如何使用jquery-mobile以水平样式显示垂直单选按钮
- 类似materialdesign的样式显示CSS中的过渡
- 以格式化可读样式显示日期差异
- 操作样式显示属性
- 筛选出具有CSS样式显示的JQuery元素:无