选中 t:选择许多复选框中的所有复选框

Question

我使用 JSF 2.0 创建了 Web 应用程序，其中我有很多复选框。我想在单击"全选复选框"时选中这些复选框。

我有以下代码

<t:selectBooleanCheckbox value="#{UserRegistration.selectAll}" onclick="selectAll(this)" />
<t:selectManyCheckbox value="#{UserRegistration.pagesSelected}" layout="pageDirection"  layoutWidth="4">
    <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
    <f:selectItem itemValue="success" itemLabel="Register New Project" />
    <f:selectItem itemValue="getReportss" itemLabel="Project Reports" />
    <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project" />
    <f:selectItem itemValue="addUserss" itemLabel="Add User Account" />
    <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log" />
    <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users" />
</t:selectManyCheckbox>

JavaScript 是

<script language="javascript">
    function selectAll(checkbox) {
        alert('called me == ' + checkbox.checked);
        var elements = checkbox.form.elements;
        if (checkbox.checked==true) {
            alert('selecting all');
            for (var i = 0; i &lt; elements.length; i++) {
                var element = elements[i];
                alert('selecting all ' + element.checked + '==' + element.id + '==');
                if (/checkboxId$/.test(element.id)) {
                    alert('inside...')
                    element.checked = checkbox.checked;
                }
            }
        }
     }
</script>

但是它不起作用。

为了进行测试，我添加了alert('selecting all ' + element.checked + '==');但是为此我得到了selecting all ====输出，即我没有获得element.id的数据。

当我<t:selectManyCheckbox更改为<h:selectManyCheckbox时，我得到了价值。

知道我做错了什么吗？

编辑 1

HTML 生成的输出是

<table id="favNumber4">
<tr><td><label><input type="checkbox" name="favNumber4" checked="checked" value="1" />&#160;Joomla Websites (Fahim M Parkar)</label></td><td><label><input type="checkbox" name="favNumber4" checked="checked" value="2" />&#160;iPhone Application (Fahim M Parkar)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" checked="checked" value="3" />&#160;Project 001 (New Applicant Two)</label></td><td><label><input type="checkbox" name="favNumber4" value="4" />&#160;Project 002 (New Applicant Two)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" value="5" />&#160;Project 003 (New Applicant Two)</label></td><td><label><input type="checkbox" name="favNumber4" value="6" />&#160;Project 004 (New Applicant Two)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" value="7" />&#160;PP1 (Testing Applicant)</label></td><td><label><input type="checkbox" name="favNumber4" value="8" />&#160;PP2 (Testing Applicant)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" value="9" />&#160;TA - PR001 (Testing Applicant)</label></td><td><label><input type="checkbox" name="favNumber4" value="10" />&#160;XXXXX 1 (XXXXX)</label></td></tr>

编辑 2

请注意，我还有更多复选框，如下所示。

<h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight">
    <f:selectItem itemValue="add" itemLabel="Add"/>
    <f:selectItem itemValue="delete" itemLabel="Delete" />
    <f:selectItem itemValue="edit" itemLabel="Edit" />
    <f:selectItem itemValue="invite" itemLabel="Invite For Projects" />
</h:selectManyCheckbox>

Answer 1

以下是我所拥有的....

<script language="javascript" type="text/javascript">
    function selectAllProjects() {
        var iLen=userRegisterForm.elements.length;
        for (var i=0; i&lt;iLen; i++) {
            if (document.userRegisterForm.elements[i].type == "checkbox" &amp;&amp; document.userRegisterForm.elements[i].value>=1) {
                document.userRegisterForm.elements[i].checked = true;
            }
        }
    }
    function deselectAllProjects() {
        var iLen=userRegisterForm.elements.length;
        for (var i=0; i&lt;iLen; i++) {
            if (document.userRegisterForm.elements[i].type == "checkbox" &amp;&amp; document.userRegisterForm.elements[i].value>=1) {
                document.userRegisterForm.elements[i].checked = false;
            }
        }
    }
</script>

| <a onclick="selectAllProjects();">Select All</a> |
<a onclick="deselectAllProjects();">Clear All</a> |

Answer 2

我在服务器端帮不上忙，但在您的客户端代码中：

> <script language="javascript">

语言属性在 HTML 4 中已弃用，并从 HTML5 中删除。type 属性在 HTML 4 中是必需的，在 HTML5 中是可选的。它可以设置为 type="text/javascript" ，尽管在实践中这不是必需的。

>     function selectAll(checkbox) {
>         alert('called me == ' + checkbox.checked);
> 
>         var elements = checkbox.form.elements;
>         if (checkbox.checked==true) {

选中的属性是布尔值，因此您可以执行以下操作：

          if (checkbox.checked) {

等等。也许更简单的是循环访问元素并将复选框设置为与复选框相同的"复选框"，例如

  var checked = checkbox.checked;
  for (var i=0, iLen=elements.length; i<iLen; i++) {
    if (elements[i].type == "checkbox") {
      elements[i].checked = checked;
    }
  }