Question

我有一个简单的文本过滤器（未显示），它为表中的所有行提供了显示属性为＆＃34; none＆＃34;或＆＃34; table-row＆＃34;。我试图让我的所有＆＃34;选择所有＆＃34;脚本只检查可见的框，但我的当前代码检查所有内容，无论可见性如何。

我如何只检查那些可见的？

<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>

Answer 1

这是将弹出你想要的代码

<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>

Answer 2

这可能有效：

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 The Definitive Guide，第16.4节“查询计算样式”。

Answer 3

检查之前检查它是否可见。

if (checkboxes[i].is(":visible")){
    checkboxes[i].checked = checktoggle;
}

此代码仅检查可见项复选框。

Answer 4

您可以检查每行的高度。如果高度> 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;
       }  
    } 
  }

Answer 5

您可以使用var vector = new THREE.Vector3() vector.set(geometry.vertices[i].x, geometry.vertices[i].y, geometry.vertices[i].z); vector.setLength(h); geometry.vertices[i].x = vector.x; geometry.vertices[i].y = vector.y; geometry.vertices[i].z = vector.z;布尔值：

hidden

Answer 6

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;
          }
        }

    }
}

Javascript选择表中行具有样式显示标记的所有复选框

6 个答案: