javascript - JavaScript によって生成されたすべてのチェックボックスをオンにする

Question

Javaスクリプトを使用して作成したすべてのチェックボックスをチェックするcheckallチェックボックスを作成しようとしています。

最初にユーザーから行と列の数を取得し、次に JavaScript を使用してテーブルを生成し、それらのセルにチェックボックスを追加します。

ここで、生成されたすべてのチェックボックスを JavaScript でチェックする checkall チェックボックスを作成したいと考えています。

セルとチェックボックスを生成する方法は次のとおりです..今まで書いたコード...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>


<script type="text/javascript">

  function createTable() {
      // alert("invoked")
     var a, b, tableElem, rowElem, colElem, check,inc,hall,theatre,row,col;

     a = document.getElementById('rows').value;
     b = document.getElementById('cols').value;

     hall =  document.getElementById('theatreName').value;
     theatre =  document.getElementById('hallID').value;

     document.getElementById('hdnhallName').value = hall;
     document.getElementById('hdntheatreName').value = theatre;
     document.getElementById("norow").value = a;
     document.getElementById("nocol").value = b;
     //alert(document.getElementById('hdntheatreName').value);
     //alert(document.getElementById('hdnhallName').value);

     inc=1;

     if (a == "" || b == "") {
        alert("Please enter some numeric value");
     } else {
        tableElem = document.createElement('table');
        tableElem.style.border="1px solid black";


           for (var i = 0; i < a; i++) {
               rowElem = document.createElement('tr');

               for (var j = 0; j < b; j++) {
                 colElem = document.createElement('td');
                 colElem.style.border="1px solid black";
                 colElem.appendChild(document.createTextNode(inc)); //to print cell number
                 rowElem.appendChild(colElem);
                 check = document.createElement('input');
                 check.type = "checkbox";
                 check.name = "chkSeat";
                //check.value = "chk"+inc;

                 check.value = inc;
                 check.id = "chk"+inc;
                //alert(check.value);


                 colElem.appendChild(check);
                 inc++;
               //colElem.appendChild(lab);

        }

        tableElem.appendChild(rowElem);
    }


            document.getElementById("seat_tble2_td").appendChild(tableElem);
            document.getElementById("sub_seat").disabled = false;
            document.getElementById("chkall").disabled=false;



}



}


 function checkall(bx){

           var checkboxes = document.getElementsByName('chkSeat');
           for (var i = 0; i < checkboxes.length; i++)
              checkboxes[i].checked = source.checked;



}



</script>
    <h1>Create seating plan</h1>
    <table id="table_seat" border="1" width="500" >
        <tr>
           <td>
              <!-- <form action="" name="f1" onsubmit=""> -->
               <table width="100%" border="0" cellpadding="5" cellspacing="0">
                 <tr>
                    <td width="40%" height="40" class="txt">Theatre Name: </td>
                    <td width="60%"><input type="text" name="theatreName" id="theatreName"/></td>
                 </tr>
                 <tr>
                    <td height="46" class="txt">Hall ID : </td>
                    <td><input type="text" name="hallID" id="hallID"/></td>
                </tr>
                <tr>
                    <td height="46" class="txt">Rows : </td>
                    <td><input type="text" name="rows" id="rows"/></td>
                </tr>
                 <tr>
                    <td height="46" class="txt">Columns : </td>
                    <td><input type="text" name="cols" id="cols"/></td>
                </tr>
                <tr>
                    <td align="right"> <input type="submit" name="Submit" value="Generate seat plan" onclick="createTable();"/></td>
                    <!--<td align="right"> <button style="width:20px; height:10px;" onclick="createTable();"></button></td>-->
                    <td valign="top" align="left"><input type="reset" name="Submit2" value="      Reset      " /></td>


                </tr>

             </table>
           <!--  </form> -->

           </td>
       </tr>

   </table>
    <form action="SeatMap" method="post" name="f1" onsubmit="">
        <table id="seat_table2" cellpadding="10">
                   <tr>

                       <td id="seat_tble2_td">




                       </td>

                   </tr>




                    <tr>

                       <td id="seat_tble2_td1">

                           <input type="hidden" name="hdntheatreName" id="hdntheatreName"/>
                           <input type="hidden" name="hdnhallName" id="hdnhallName"/>
                           <input type="hidden" name="norow" id="norow"/>
                           <input type="hidden" name="nocol" id="nocol"/>
                           <input type="submit" value="Submit" id="sub_seat" name="sub_seat" disabled>


                       </td>

                   </tr>


                   <tr>

                       <td>

                           <input id="chkall" type="checkbox" name="chkall"  onClick="checkAll(this);" disabled />Check All

                       </td>
                   </tr>


  </table>
 </form>
</body>

checkall の JavaScript 関数を作成しようとしましたが、機能しません。私を助けてください。サーバー側のコーディングに JSP とサーブレットを使用しています。クライアント側の Javascript では JQuery でも大丈夫ですが、JQuery はわかりません。

score 1 · Accepted Answer

この質問はすでに回答されていることは知っていますが、これが私が行った方法です...

シナリオ: データベースから生成されたデータの行は、を使用して行われますPHP。したがって、テーブル行として画面に出力されるのでtextbox、カウンター付きのも追加します。したがって、最初のチェックボックスの名前は次のようになりますchkCheckbox_$Count。変数カウントは、行ごとに増加し続けます。

私のHTMLは次のようになります。

<input type="checkbox" name="chkCheckbox_All" onclick="CheckAllCheckboxes();" />Check All
<?php
$Count = 1;
while($Field = mysql_fetch_array($Result))
    {
    ?>
    <tr>
        <td>
            <input type="checkbox" name="chkCheckbox_<?php echo $Count; ?>" />
        </td>
        <td><?php echo $Field['ProductID']; ?></td>
        <td><?php echo $Field['ProductName']; ?></td>
        <td><?php echo $Field['ProductDescription']; ?></td>
        <td><?php echo $Field['Quantity']; ?></td>
        <td><?php echo $Field['Price']; ?></td>
        <td><?php echo $Field['Discount']; ?></td>
    </tr>
    <?php
    $Count++;
    }
    ?>
    <input type="hidden" id="txtUltimateRowCount" value="<?php echo $Count-1; ?>" />

そしてJavascript関数：

<script>
function CheckAllCheckboxes() {
    var Count=1;
    var EndValue=document.getElementById('txtUltimateRowCount').value;
    if (document.getElementById('chkCheckbox_All').checked == true)
        {//Checked so Check All.
            while (Count <= EndValue)
                {
                document.getElementById('chkCheckbox_' + Count).setAttribute('checked', 'checked');
                Count=Count+1;
                }
        }
    else if (document.getElementById('chkCheckbox_All').checked == false)
        {//Unchecked so Uncheck All.
            while (Count <= EndValue)
                {
                document.getElementById('chkCheckbox_' + Count).removeAttribute('checked');
                Count=Count+1;
                }
        }
}
</script>

score 0 · Accepted Answer

このチェックボックスを表の見出しに追加します

 <input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" />

本文のすべてのチェックボックスに次の名前を付けます

<input type="checkbox" name="selected" />
<input type="checkbox" name="selected" />
<input type="checkbox" name="selected" />

…………

これはうまくいきます

javascript - JavaScript によって生成されたすべてのチェック ボックスをオンにする

2 に答える 2

Related

Reference

javascript - JavaScript によって生成されたすべてのチェックボックスをオンにする