Question

我使用JSF 2.0创建了web应用程序，其中有很多复选框。我想在单击Select All Checkbox选择这些复选框。

我有以下代码

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

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

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

checked属性是boolean，所以你可以这样做：

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

Answer 2

以下是我的......

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

选择t：selectManyCheckbox中的ALL复选框

编辑1

编辑2

2 个答案: