Check all/uncheck all Checkbox in looping statement

Question

У меня проблема с моей программой. Вот мой код фрагмента.

Вот код Javascript/JQuery.

<script language='javascript'> 

///SELECTING CHECKBOXES//// 
$(function(){ 

// add multiple select/deselect functionality 
$("#selectall").click(function() { 
     $('.case').attr('checked', this.checked); 
}); 

// if all checkbox are selected, check the selectall checkbox 
// and viceversa 
$(".case").click(function(){ 

    if($(".case").length == $(".case:checked").length) { 
     $("#selectall").attr("checked", "checked"); 
    } else { 
     $("#selectall").removeAttr("checked"); 
    } 

}); 
}); 
</script> 

---

И вот код, где я буду интегрировать эту JavaScript.

<h2>Quotation ID</h2> 
      <?php 

     $select_orders = mysql_query ("SELECT * FROM tblorder WHERE project_id = '$project_id' GROUP BY quotation_id") OR DIE (mysql_error()); 
     while ($row2=mysql_fetch_array($select_orders)){ 
      $quote_id = $row2['quotation_id']; 


      ?> 
     <h3 class="expand"><?php echo $quote_id; ?></h3> 
     <div class="collapse"> 
      <table align='center' border='1' class='display'> 
       <thead> 
        <th><input type='checkbox' onclick='checkall()' id='selectall'/></th> 
        <th>Product Type</th> 
        <th width='20px'>Product type code</th> 
        <th width='20px'>Quantity</th> 
        <th>Width</th> 
        <th>Height</th> 
        <th>Total Sub.</th> 
       </thead> 
       <tbody> 
       <?php 
       $tots_tots = 0; 
       $tots_subs = 0; 
       $select_orders2 = mysql_query ("SELECT * FROM tblorder WHERE project_id = '$project_id' AND quotation_id = '$quote_id'") OR DIE (mysql_error()); 
        while ($row3=mysql_fetch_array($select_orders2)){ 
         $idd = $row3['id']; 
         $project_id2 = $row3['project_id']; 
         $order_id = $row3['quotation_id']; 
         $prod_type = $row3['prod_type']; 
         $prod_type_code = $row3['prod_type_code']; 
         $qty = $row3['qty']; 
         $width = $row3['width']; 
         $height = $row3['height']; 
         $tot_sub = $row3['total_subs']; 

         $tots_subs += $tot_sub; 

       echo "<tr bgcolor='".$colors[$c++ % 2]."' align='center'>"; 
        echo "<td> 
        <input type='hidden' name='project_name' value='$project_name'> 
        <input type='checkbox' name='check_ptc[]' value='$prod_type_code' style='display:none;' checked> 
        <input type='checkbox' class='case' name='checkbox[]' value='".$idd."'></td>"; 
        echo " 
          <input type='hidden' name='project_id[]' value='$project_id2'> 
         </td>"; 
        echo "<td>".$prod_type." 
          <input type='hidden' name='quotation_id[]' value='$order_id'> 
          <input type='hidden' name='prod_type[]' value='$prod_type'> 
         </td>"; 
        echo "<td>".$prod_type_code." 
          <input type='hidden' name='prod_type_code[]' value='$prod_type_code'> 
         </td>"; 
        echo "<td>".$qty."</td>"; 
        echo "<td>".$width."</td>"; 
        echo "<td>".$height."</td>"; 
        echo "<td>".$tot_sub."</td>"; 
       echo "</tr>"; 
       } 
       echo "<tr>"; 
       echo "<td></td><td></td><td></td><td></td><td></td> 
         <td> 
          <strong><b>Total:</b></strong>"; 
       echo "</td>"; 
       echo "<td> 
          <font color='#900'><u><b>$tots_subs</b></u></font> 
         </td>"; 

       echo "</tr>"; 
       ?> 
       </tbody> 
      </table> 
     </div> 
     <?php 
     } 
     ?> 

---

Поскольку таблица находится в петле. проблема заключается в том, когда появляется первая таблица. и установите флажок первого заголовка, чтобы он установил флажок в другой таблице. который я не хочу. тот, который я ищу, есть, если есть способ, который я могу также повторить идентификатор флажка и его класса. или есть другой способ сделать то, что я хочу.

---

Как вы можете видеть. у этих 3 таблиц есть собственный заголовок, где я хочу проверить все внутри таблиц. Какая у вас умная идея, как я могу это сделать.

Заранее спасибо ..

Answer 1

использование .prop

$(function() { 
    var $cases = $('.case'); 

    // add multiple select/deselect functionality 
    var $all = $("#selectall").click(function() { 
     $$cases.prop('checked', this.checked); 
    }); 

    // if all checkbox are selected, check the selectall checkbox 
    // and viceversa 
    $cases.click(function() { 
     $all.prop("checked", $cases.filter(":not(:checked)").length) != 0); 
    }); 
}); 

Answer 2

Вы можете сделать это следующим образом.

$('.allcb').on('click', function(){ 
    var childClass = $(this).attr('data-child'); 
    $('.'+childClass+'').prop('checked', this.checked); 
}); 

FIDDLE

UPDATE

Просто применять класс allcb к основным флажков и ребенку флажков применять класс с именем, как chk. Это должно соответствовать вашим потребностям. Вот обновленная версия FIDDLE

Answer 3

попробуйте этот код php вместо сценария // check-all/uncheck-all checkbox.

<a onclick="$(this).parent().find(':checkbox').attr('checked', true);"><?php echo $text_select_all; ?></a>/<a onclick="$(this).parent().find(':checkbox').attr('checked', false);"><?php echo $text_unselect_all; ?></a> 

Answer 4

 $('#selectall').click(function() { 
      if (this.checked) { 

       $(':checkbox').each(function() { 
        this.checked = true; 
       }); 
      } 

      else { 
       $(':checkbox').each(function() { 
        this.checked = false; 
       }); 
      } 
     })