2

我使用 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>
4

2 回答 2

0

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

<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> |
于 2012-10-06T12:33:54.163 回答
0

我无法在服务器端提供帮助，但在您的客户端代码中：

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

等等。可能更简单地循环元素并将复选框设置为与checkbox相同的“选中状态” ，例如

  var checked = checkbox.checked;

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    if (elements[i].type == "checkbox") {
      elements[i].checked = checked;
    }
  }
于 2012-10-06T11:27:34.053 回答