jquery之checkbox全选全不选反选的操作方法

最新推荐文章于 2022-05-09 13:54:09 发布

原创最新推荐文章于 2022-05-09 13:54:09 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

Php 同时被 3 个专栏收录

465 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

本文介绍了一种使用jQuery实现Checkbox全选、全不选及反选的方法。通过html代码展示了具体的Checkbox列表，配合js代码实现了点击全选按钮控制所有子Checkbox状态的功能。此方法适用于需要批量操作Checkbox的场景。

jquery之checkbox全选全不选反选的操作方法

html代码

<ul>
<li><input type="checkbox" id="shop_jxs_product_ids_3_9" name="product_id[]" value="9" class="product_checkbox"> <a data-product_id="9">弯刀</a></li>
<li><input type="checkbox" id="shop_jxs_product_ids_3_8" name="product_id[]" value="8" class="product_checkbox"> <a data-product_id="8">AM800DT-19</a></li>
<li><input type="checkbox" id="shop_jxs_product_ids_3_7" name="product_id[]" value="7" class="product_checkbox"> <a data-product_id="7">TDT1087Z</a></li>
<li><input type="checkbox" id="shop_jxs_product_ids_3_6" name="product_id[]" value="6" class="product_checkbox"> <a data-product_id="6">AM1 城市通勤车 20AH大容量锂电池</a></li>
<li><input type="checkbox" id="shop_jxs_product_ids_3_5" name="product_id[]" value="5" class="product_checkbox"> <a data-product_id="5">爱玛（AIMA）电动车 IN麦 6寸全面显示大屏 </a></li>
<li><input type="checkbox" id="shop_jxs_product_ids_3_4" name="product_id[]" value="4" class="product_checkbox"> <a data-product_id="4">爱玛（AIMA）电动车 IN麦 6寸全面显示大屏 </a></li>
</ul>    
<input type="checkbox" id="product_all" name="product_all" style="margin-top: 15px;margin-left:16px" onclick="check_product(this,3)">

js代码


   function check_product(that, num) {
      
        if ($(that).prop("checked")) {
            $("#shop_product_ids_" + num).find(".product_checkbox").prop("checked", true);
        } else {
            $("#shop_product_ids_" + num).find(".product_checkbox").prop("checked", false);
        }
    }