选中所有/取消选中循环语句中的所有复选框

Posted 2023-05-08

【中文标题】选中所有/取消选中循环语句中的所有复选框

【英文标题】：Check all / uncheck all Checkbox in looping statement

【发布时间】：2013-09-12 12:43:49

【问题描述】：

我的程序有问题。这是我的 sn-p 代码。

这是 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 
        
        ?>

---

因为表格在循环中。问题是当第一个表出现时。并单击第一个标题复选框，它将检查其他表中的所有复选框。我不想发生。我正在寻找的是如果有一种方法我还可以迭代复选框的 ID 及其类。或者还有其他方法可以做我想做的事情。

---

如您所见。这 3 个表有自己的复选框标题，我想在那里检查所有表。你有什么聪明的主意我该怎么做。

提前谢谢..

【问题讨论】：

您可以将if($(".case").length == $(".case:checked").length) 替换为更短的版本：if(!$(".case:not(:checked)").length)

在此元素中，移除内联 onclick 处理程序！ jquery 正在为你做这件事！ <input type='checkbox' onclick='checkall()' id='selectall'/>

【参考方案1】：

你可以这样做。

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

FIDDLE

更新

只需将allcb 类应用到主复选框，然后将名为chk 的类应用到子复选框。这应该符合您的需求。这是更新的 FIDDLE

【讨论】：

由于我的表在循环内。 data-child 和 class allcb 也应该迭代.. 我试过这段代码，但没有用:(

先生 什么是使用函数 parent() x4？抱歉，我是 jquery 的新手：D 为什么你有 4 个 parent()？这是为生成的四次吗？

我使用了parent()x4，因为.allcb被放在th标签下。所以它的第一个父级将是th，而不是th 是tr 的子级，而tr 是thead 的子级，而thead 是table 的子级

你解释得比文档好得多。 :D

它解决了您的问题吗？或者您在实现该代码时仍然面临任何困难？

【参考方案2】：

使用 .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);
    );
);

【讨论】：

使用此代码是必不可少的。但就我而言，这不是我想要的。当我将此代码集成到我的代码中时..它有同样的问题。当第一个表出现时.. 并切换选中复选框其他表也被选中。这不是我的计划。 @Khawer Zeshan 的想法很相似。但我没有运气。 :(

【参考方案3】：

试试这个 php 代码而不是脚本 //选中所有/取消选中所有复选框。

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