js 按钮（checkbox）控制多个checkbox的选中或不选中问题

JS全选与全不选功能实现

最新推荐文章于 2025-09-26 15:09:25 发布

转载最新推荐文章于 2025-09-26 15:09:25 发布 · 9.1k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/jirglt/blog/3011337

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的全选与全不选功能，通过一个复选框控制多个复选框的状态，适用于网站后台管理系统中城市选择等场景。代码包括HTML结构与jQuery绑定事件，方便快捷地实现功能。

为什么80%的码农都做不了架构师？>>>

html代码：

<input type="checkbox" id="checkAll"/> 全选/全不选

<input type="checkbox" name="centralCity" value="1">北京 

<input type="checkbox" name="centralCity" value="2">天津 

<input type="checkbox" name="centralCity" value="3">上海 

<input type="checkbox" name="centralCity" value="4">重庆 

js代码：

$(function() {
   //全选或全不选
   $("#checkAll").click(function() {
       if(this.checked) {
          $("input[name='centralCity']").prop('checked', true);
       } else {
$("input[name='centralCity']").prop('checked', false);
       }
   });
});
</script>