Question

我有一个包含大约40个项目的复选框列表。我想只显示前20个项目，其余的将是visible = false。此复选框列表通过数据库填充。下面是我正在使用的代码，但它不起作用：

$(function() {
    var ctr = document.getElementById("chkTopCompanies");
    ctr.style.display = "none";
    var options = ctr.getElementsByTagName('label');
    for (var i = 0; i < 20; i++) {
        ctr.childNodes[i].display = 'block';
    }
})

没有一个答案有帮助。这是为Checkboxlist生成的源

<table id="chkTopCompanies" style="color:#004080;font-weight:bold;margin-top: 10px; border-spacing: 20px 0;
                            font-size: small; margin-bottom: 10px; width: 100%;">
    <tr>
        <td><input id="chkTopCompanies_0" type="checkbox" name="chkTopCompanies$0" value="Accenture" /><label for="chkTopCompanies_0">Accenture</label></td>
        <td><input id="chkTopCompanies_1" type="checkbox" name="chkTopCompanies$1" value="Refbro consultancy limi" /><label for="chkTopCompanies_1">Refbro consultancy limi</label></td>
        <td><input id="chkTopCompanies_2" type="checkbox" name="chkTopCompanies$2" value="TCS" /><label for="chkTopCompanies_2">TCS</label></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

我没有复制样本

的前3条记录

Answer 1

如果您将父显示设置为“无”，则即使您将其显示指定为“阻止”，也会隐藏所有子项。

你可能想要像这样的循环

for(var i = 19; i < 40; i++){
    ctr.childNodes[i].display = 'none';
}

这样就可以隐藏最后20个孩子了。

Answer 2

作为替代方案，您可以使用CSS

/* assuming that there are only checkboxes in  #chkTopCompanier */

#chkTopCompanies input:nth-of-type(n+20) {
   display: none;
}

Answer 3

尝试以下代码。我已经显示了前2个复选框并隐藏了其余部分。您可以根据需要更改数字。

$(document).ready(function() {
   $("#chkTopCompanies td:gt(1)").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="chkTopCompanies" style="color:#004080;font-weight:bold;margin-top: 10px; border-spacing: 20px 0;
                            font-size: small; margin-bottom: 10px; width: 100%;">
	<tr>
		<td><input id="chkTopCompanies_0" type="checkbox" name="chkTopCompanies$0" value="Accenture" /><label for="chkTopCompanies_0">Accenture</label></td><td><input id="chkTopCompanies_1" type="checkbox" name="chkTopCompanies$1" value="Refbro consultancy limi" /><label for="chkTopCompanies_1">Refbro consultancy limi</label></td><td><input id="chkTopCompanies_2" type="checkbox" name="chkTopCompanies$2" value="TCS" /><label for="chkTopCompanies_2">TCS</label></td><td></td><td></td><td></td>
	</tr>
</table>

Answer 4

如果您可以使用Angular Js（如果可能的话）

   <ul>
    <li ng-repeat=" opt in options |limitTo:20 ">
        <input type="checkbox" ng-model="opt ">
    </li>
   </ul>

limitTo filetr可以是动态的，在下拉列表中设置一个模型，其值为10,15,20,30 ....并使用limitTo过滤器中的模型并设置所有

Answer 5

您可以使用:gt()选择器并轻松隐藏它们使用gt()内的数字进行播放，并隐藏索引号高于指定数字的元素。索引号从0开始：

＆＃13;

$("#chkTopCompanies td:gt(2)").hide()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="chkTopCompanies" style="color:#004080;font-weight:bold;margin-top: 10px; border-spacing: 20px 0;
                            font-size: small; margin-bottom: 10px; width: 100%;">
    <tr>
        <td><input id="chkTopCompanies_0" type="checkbox" name="chkTopCompanies$0" value="Accenture" /><label for="chkTopCompanies_0">Accenture</label></td>
        <td><input id="chkTopCompanies_1" type="checkbox" name="chkTopCompanies$1" value="Refbro consultancy limi" /><label for="chkTopCompanies_1">Refbro consultancy limi</label></td>
        <td><input id="chkTopCompanies_2" type="checkbox" name="chkTopCompanies$2" value="TCS" /><label for="chkTopCompanies_2">TCS</label></td>
        <td><input id="chkTopCompanies_2" type="checkbox" name="chkTopCompanies$2" value="TCS" /><label for="chkTopCompanies_2">Another</label></td>
        <td><input id="chkTopCompanies_2" type="checkbox" name="chkTopCompanies$2" value="TCS" /><label for="chkTopCompanies_2">Another 2</label></td>
        <td><input id="chkTopCompanies_2" type="checkbox" name="chkTopCompanies$2" value="TCS" /><label for="chkTopCompanies_2">Another 3</label></td>
    </tr>
</table>

＆＃13;

显示checkboxlist jquery的复选框

5 个答案: