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, но его не работает. Пожалуйста, помогите мне. Я использую JSP и сервлеты для кодирования на стороне сервера. На стороне клиента 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);" />

и имя все галочки в теле как

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

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

это будет нормально работать

источник

2013-07-04 15:36:15

Но Gaurav как я могу назвать флажки в теле .. Я создаю флажки JavaScript. Итак, вы пытаетесь сказать, что я должен изменить свои имена в самом javascrip как выбранном? –

Он отлично работает только в первый раз, когда Gaurav .. Когда я сниму его и снова проверю, он не работает. :( –

Теперь он отлично работает ... Большое спасибо Gaurav ... –

Checkall флажки, созданные через javascript

ответ

Смежные вопросы