2

多くのチェックボックスがあるJSF2.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">

言語属性はHTML4で非推奨になり、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;
    }
  }
于 2012-10-06T11:27:34.053 に答える
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 に答える