如何通过checkbox-input-main主开关控制所有the-checkbox-input类开关状态

问题原因 #

• attr()方法使用错误：你编写的$(".the-checkbox-input").attr("checked")是读取属性值的语法，设置checked属性需要传入第二个参数，正确语法为attr("checked", true)
• 操作checkbox选中状态应该使用prop()方法：attr()只能修改HTML标签上的静态初始属性，无法同步DOM元素的实时交互状态，多次切换后会出现状态不更新的问题，prop()专门用于操作表单元素的动态布尔属性。

修复后代码 #

$(document).ready(function() {
  // 建议将click事件换成change，兼容键盘切换等更多交互场景
  $(".checkbox-input-main").on("change", function() {
    $(".the-checkbox-input").prop("checked", $(this).is(":checked"));
  });
});

内容的提问来源于stack exchange，提问作者Shreyansh Kashyap