在制作列表时，我们经常会遇到选择所有列表并反向选择的批处理问题，例如：

我当时意识到很简单，然后我想把它打包成一个公共js。包太烂了，不好意思贴(就是把实现代码放到一个公共js里，然后每个页面用一个固定的id，class，现在不好意思让他打包)。然后我以为老板之前写过这个函数，看看他是怎么写的。没有对比真的是无伤大雅。这叫包装；

$(' : checkbox[data-check-target]')。单击(function () {var target=$(this))。attr('数据检查目标')；if ($(this)。道具('选中'){$(目标)。prop('checked '，true)；} else {$(目标)。prop('checked '，false)；}});首先这里体现的是高封装性。js和html分离后的连接桥只有一个自定义的data-check-target属性(而且我当时用了两个：一个all复选框，一个sub check复选框，所有相关点都用了，所以没有封装效果，js和html太耦合了)(看到上面的js，很好奇怎么通过一个连接点把三个相关的东西连接起来)；

接下来，让我们继续看看具体的用途：

我发现复选框用于js链接的桥的自定义属性数据-检查-目标，有点特殊：

InputType=' checkbox ' data-check-target='。id-checkbox/“其值为”。id-checkbox”，这似乎很奇怪。继续往下看复选框的实现：

输入类型=' checkbox '名称=' ids []'值=' @ item。id ' class=' id-checkbox '/这里很明显，原始子复选框的类名存储在自定义属性数据-检查-目标中；

var target=$(this)。attr('数据检查目标')；然后通过自定义属性数据-校验-目标得到复选框的类，从而实现高度封装；

我的总结是js和html已经通过了自定义属性数据-校验-目标的通信，子复选框取决于所有复选框的自定义属性数据-校验-目标的值；

这个例子说明代码不难，也没有什么难懂的，就是通过一个自定义属性巧妙地完成了低耦合封装，这就是这段代码的难点和精髓；

我真的抑制不住内心的崇拜。这些代码行太漂亮了。

PS:为什么js用prop代替attr？因为：如果在当前输入初始化中没有定义检查属性，则元素没有指定的检查属性，所以。attr()将返回undefined；

对于HTML元素的固有属性，在处理时，使用prop方法。

对于我们自己定制的HTML元素的DOM属性，在处理的时候，使用attr方法。

以上是边肖介绍的JQuery实现列表中复选框的包(推荐)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！