Checkall複選框通過javascript生成

我想創建一個checkall複選框，將檢查所有使用java腳本創建的複選框。Checkall複選框通過javascript生成

我首先從用戶那裏得到行和列的no，然後使用javascript生成一個表格，然後在這些單元格中添加複選框。

現在我想創建一個checkall複選框，它將通過javascript檢查所有生成的複選框。

這是我如何我產生我寫至今細胞和checkboxes..My代碼...

<!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和Servlets進行服務器端編碼。在客戶端JavaScript甚至JQuery是好的，但我不知道JQuery。

來源

2013-07-04 newbie_learner

我知道這個問題已經得到解答，但這裏是我怎麼做到的......

場景：從數據庫生成的數據行使用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>

來源

2013-12-08 05:44:30

在體內該複選框添加到表頭

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

和名稱的所有複選框爲

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

這將工作正常

來源

2013-07-04 15:36:15

但拉夫我怎麼能說出身體複選框..我創建的複選框JavaScript的。你是否試圖說我應該在javascrip本身中選擇他們的名字？ –

它僅在第一次Gaurav時才完美無誤。當我取消選中並再次檢查時，它無效。 :( –

現在它工作正常...非常感謝Gaurav ... –

Checkall複選框通過javascript生成

回答

相關問題