选中通过javascript生成的所有复选框

Checkall check boxes generated through javascript

本文关键字：复选框 javascript      更新时间：2023-09-26

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

我知道这个问题已经得到了答案，但下面是我是如何做到的…

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

将此复选框添加到表头

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

这将很好地工作

相关文章：