Question

我有输入复选框即选择全部。我从jquery end添加了复选框。如果用户点击选择将选中所有剩余的选项。但点击全选时我收到错误。我在附上代码。

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

错误：未捕获的syntaxError。

此处生成的错误$(input[name=msisdn\[\]]).attr(checked,> this.checked)

Answer 1

＆＃13;

$('#multiple_msisdn').append('<label class="exp" style="margin-bottom: 5px; display: inline-block;"><input type="checkbox" class="exp SelectAll"> -- Select All -- </label>').append('<br><label class="exp" style="margin-bottom: 5px; display: inline-block;"><input type="checkbox" class="exp" name="msisdn[]"> -- 1 -- </label>').append('<br><label class="exp" style="margin-bottom: 5px; display: inline-block;"><input type="checkbox" class="exp" name="msisdn[]"> -- 2 -- </label>');

$(document).on("click",".SelectAll",function(){
  $("input[name='msisdn[]']").prop('checked',$(this).is(':checked'))
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multiple_msisdn"></div>

＆＃13;

Answer 2

语法错误是因为你正在编写javascript代码inline＆amp;没有逃脱角色。

现在更好的实现方法是使用jquery来处理函数。看看下面的例子。选择全部选择/取消选择全部以及如果用户更改复选框，则选择全部反映正确状态。尝试单独选择所有复选框＆amp;选择所有也将被检查＆amp;反之亦然。

$(function() {

  //handler for selectall change
  $('#selectAll').change(function() {
    $("input[name='msisdn[]']").prop('checked', $(this).prop('checked'))
  })

  //handler for all checkboxes to refect selectAll status
  $("input[name='msisdn[]']").change(function() {
    $("#selectAll").prop('checked', true)
    $("input[name='msisdn[]']").each(function() {
      if (!$(this).prop('checked')){
        $("#selectAll").prop('checked', $(this).prop('checked'));
        return;
      }
    })
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multiple_msisdn">
  <label class="exp">
<input type="checkbox" class="exp" id="selectAll"> -- Select All -- </label>
  <label class="exp">
<input type="checkbox" class="exp" name="msisdn[]" value="1">&nbsp;ABC [xxxxxxxx]</label>
  <label class="exp">
 <input type="checkbox" class="exp" name="msisdn[]" value="18">&nbsp;ABC [xxxxxx]</label>
</div>

在jquery中附加输入复选框

2 个答案: