Question

我正在尝试创建一个checkall复选框，它将检查我使用java脚本创建的所有复选框。

我首先从用户那里获取行和列，然后使用javascript生成一个表，然后在这些单元格中附加复选框。

现在我想创建一个checkall复选框，它将通过javascript检查所有生成的复选框。

以下是我如何生成单元格和复选框。我直到现在编写的代码......

<!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和Servlet进行服务器端编码。在客户端Javascript甚至JQuery都可以，但我不知道JQuery。

Answer 1

我知道这个问题已经得到了回答，但这就是我如何做到的......

场景：使用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>

Answer 2

将此复选框添加到表格头

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

............

这样可以正常使用

Checkall复选框通过javascript生成

2 个答案: