0

我正在尝试创建一个 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。

4

2 回答 2

1

我知道这个问题已经得到解答，但我是这样做的......

场景：从数据库生成的数据行是使用PHP. 因此，当它们作为表格行打印在屏幕上时，我还添加了textbox带有计数器的 a。所以第一个复选框的名称是：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>
于 2013-12-08T05:44:30.287 回答
0

将此复选框添加到表头 

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

…………

这会很好用

于 2013-07-04T15:36:15.773 回答