jquery - 使用 Jquery 在单击时选择所有复选框

Question

我有以下 HTML：

<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga</label>
<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga 1</label>
<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga 2</label>
<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga 3</label>
<label><input type="checkbox" id="selectAllEventList" name="selectAllE"> Select All</label>

和以下 Jquery：

$(document).ready(function (){

   $('#selectAllEventList').click (function () {
          $('input[name=Cevent[]]').each(function(){
          $(this).prop('checked', status);
          });

     });
 });

但我收到语法错误：

Error: Syntax error, unrecognized expression: [name=Cevent[]]

我想我写错了选择器，input[name=Cevent[]]有什么问题我怎么能正确地写它，因为我必须把它作为一个数组发送，所以我必须把它写成 Cevent[]。

Answer 1

引用属性值：

$('input[name="Cevent[]"]')

---

更新

我假设您的代码旨在在更改Cevent[]复选框时选中/取消选中所有复选框selectAllE。如果是这种情况，您可以显着缩短代码，因为大多数 jQuery 方法适用于匹配集中的每个元素（无需使用.each()）：

$(document).ready(function () {
    $('#selectAllEventList').click(function () {
        $('input[name="Cevent[]"]').prop('checked', this.checked);
    });
});​

Answer 2

您可以\使用escape [

现场演示

$(document).ready(function (){

   $('#selectAllEventList').click (function () {
          $('input[name*=Cevent\\[]').each(function(){
              if( $('#selectAllEventList').is(':checked'))
                   $(this).prop('checked',true);
              else
                   $(this).prop('checked',false);
          });

     });
 });​

Answer 3

请试试这个

见演示

JS

$('#selectAllEventList').click (function () {
          $('.chkbox').each(function(){
          $(this).prop('checked', true);
          });

     });

HTML

<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga</label>
<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga 1</label>
<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga 2</label>
<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga 3</label>
<label><input type="checkbox" id="selectAllEventList" name="selectAllE"> Select All</label>