jQuery动态添加全选复选框点击触发语法错误问题

你遇到的语法错误，主要是因为动态拼接HTML字符串时，onclick属性里的JavaScript代码引号嵌套、转义不正确，再加上操作checkbox选中状态的方法不够恰当导致的。我来帮你一步步解决：

一、直接修正原有代码（快速解决语法错误） #

先把你的代码里的引号转义和选中状态方法调整好，修正后就能正常运行了：

$('#multiple_msisdn').append( '<label class="exp" style="margin-bottom: 5px; display: inline-block;"> <input type="checkbox" class="exp" onclick="$(\'input[name=\\\"msisdn[]\\\"]\').prop(\'checked\', this.checked)">-- Select All -- </label>');

关键修正点： #

1. 引号转义处理：把onclick内的代码用单引号包裹，内部选择器的引号用转义的双引号（\\\"），避免和外层字符串的引号冲突，彻底解决语法解析失败的问题。
2. 替换attr为prop：对于checkbox的checked状态，prop()方法才是正确选择——它直接操作DOM元素的实时状态属性，而attr()仅能读取初始HTML属性，无法准确反映动态变化的选中状态。

二、更推荐的事件委托方式（代码更易维护） #

把事件写在HTML标签里的方式很容易引发转义问题，也不利于后续维护。更专业的做法是用事件委托，把事件逻辑和HTML结构分离开：

1. 先添加不带onclick的元素：

$('#multiple_msisdn').append( '<label class="exp" style="margin-bottom: 5px; display: inline-block;"> <input type="checkbox" class="exp select-all">-- Select All -- </label>');

2. 然后通过事件委托绑定change事件：

$(document).on('change', '.select-all', function() {
    // 批量设置所有msisdn复选框的选中状态
    $('input[name="msisdn[]"]').prop('checked', this.checked);
});

这种方式的优势很明显：

• 完全避开了HTML字符串里的引号转坑
• 动态添加的元素也能正常触发事件（事件委托基于父元素/文档监听）
• 行为与结构分离，代码逻辑更清晰易读

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