Jquery复选框操作

目录

• HTML
• 全选,取消全选
• 获取被选中的复选框
• On和undefined问题

HTML

<div class="form-inline">
        <button type="button" class="btn btn-sm" id="calcTotal"><i class="fa fa-dollar"></i>统计</button>
 </div>
<!-- 这个是上面的总的复选按钮 --> 
<th style="3%;">
        <div>
            <label><input type="checkbox" name="checkall"></label>
        </div>
 </th>

<!-- 循环遍历的 --> 
    <td data-title="选择">
        <div>
            <label><input type="checkbox" name="checkbox" value="@item.Id"></label>
        </div>
    </td>

全选,取消全选

神技,prop,这个方法真的非常好用

        $('input[name="checkall"]').on("click", function () {
            if ($(this).is(':checked')) {
                $('input[name="checkbox"]').each(function () {
                    $(this).prop("checked", true);
                });
            } else {
                $('input[name="checkbox"]').each(function () {
                    $(this).prop("checked", false);
                });
            }
        });

获取被选中的复选框

  $('#calcTotal').on("click", function () {
            id = [];
            $('input[name="checkbox"]:checked').each(function () {
                if ($(this).prop("checked")) {
                    console.log('选中了' + $(this).val());
                    id.push($(this).val());
                }
            })

            if (id.length > 0) {
                var dellds = id.join(",");
                console.log(dellds);
            }
  });      

On和undefined问题

在获取被选中的复选框的时候,如果你是这样写的

 $('input:checkbox:checked').each(function () {

那么,你获取的值就会出现on和undefined的问题