在页面加载时检查引导表复选框答案

【问题标题】：bootstrap-table checkboxes are checked on page load在页面加载时检查引导表复选框
【发布时间】：2017-03-06 13:05:51
【问题描述】：

我正在使用bootstrap-table 并且我正在尝试设置复选框，问题是复选框被启动为已选中，没有特殊原因

    <html>

    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta name="robots" content="noindex, nofollow">
      <meta name="googlebot" content="noindex, nofollow">
      <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
      <script type="text/javascript" src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
      <title>Bootstrap Table</title>
    </head>
    <body>
      <div class="container">
        <div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-primary">
        <div class="panel-heading">why checked?</div>

        <div class="panel-body">
          <table data-row-style="rowStyle" data-toggle="table" data-click-to-select="true">
            <thead>
              <th data-field="dd" data-checkbox="true">
              </th>
              <th data-sortable="true">
                x
              </th>
              <th data-sortable="true">
                y
              </th>
              <th data-sortable="true">
                z
              </th>
              <th data-sortable="true">
                t
              </th>
              <th data-sortable="true">
                r
              </th>
              <th data-sortable="true">
                m
              </th>
              <th></th>
            </thead>
            <tbody>
              <tr>
                <td>
                </td>
                <td> 1</td>
                <td>2</td>
                <td>3</td>
                <td> 4</td>
                <td> 5</td>
                <td><span class="label label-default">xxx</span></td>
                <td>
                  <div class="form-inline text-right">
                    <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post">
                      <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button>
                    </form>
                    <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post">
                      <input name="_method" type="hidden" value="DELETE">
                      <input type="hidden" name="_token" value="{{csrf_token()}}">
                      <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button>
                    </form>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

      </div>
    </body>
    </html>

演示：http://jsfiddle.net/e3nk137y/12160/

第二个问题，如何在复选框中添加名称和值，我尝试从 data-formatter 函数返回值/自定义属性，但在开发工具中没有看到任何更改

文档没有提到任何属性/功能/事件来自定义 thouse 复选框

更新似乎如果你想对所选元素进行排序，第一列（复选框列）就会消失

【问题讨论】：

标签： javascript jquery bootstrap-table

【解决方案1】：

当引导表在您的表格单元格中发现空白字符时，它会崩溃，这实际上很有趣。一旦删除了包括换行符在内的任何空白字符，问题似乎就自行解决了。

function check() {
  $("tbody input:checked").each(function() {
    console.log($(this).parents("tr:first").data("val"));
  });
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script type="text/javascript" src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="container">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-primary">
          <div class="panel-heading">why checked?</div>
          <div class="panel-body">
            <button onclick="check()">Check Values</button>
            <table data-row-style="rowStyle" data-toggle="table" data-click-to-select="true">
              <thead>
                <th data-field="dd" data-checkbox="true">
                </th>
                <th data-sortable="true">
                  x
                </th>
                <th data-sortable="true">
                  y
                </th>
                <th data-sortable="true">
                  z
                </th>
                <th data-sortable="true">
                  t
                </th>
                <th data-sortable="true">
                  r
                </th>
                <th data-sortable="true">
                  m
                </th>
                <th></th>
              </thead>
              <tbody>
                <tr data-val="100">
                  <td></td>
                  <td>100</td>
                  <td>200</td>
                  <td>300</td>
                  <td>400</td>
                  <td>500</td>
                  <td><span class="label label-default">xxx</span></td>
                  <td>
                    <div class="form-inline text-right">
                      <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post">
                        <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button>
                      </form>
                      <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post">
                        <input name="_method" type="hidden" value="DELETE">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button>
                      </form>
                    </div>
                  </td>
                </tr>
                <tr data-val="200">
                  <td></td>
                  <td>200</td>
                  <td>200</td>
                  <td>300</td>
                  <td>400</td>
                  <td>500</td>
                  <td><span class="label label-default">xxx</span></td>
                  <td>
                    <div class="form-inline text-right">
                      <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post">
                        <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button>
                      </form>
                      <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post">
                        <input name="_method" type="hidden" value="DELETE">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button>
                      </form>
                    </div>
                  </td>
                </tr>
                <tr data-val="300">
                  <td></td>
                  <td>300</td>
                  <td>200</td>
                  <td>300</td>
                  <td>400</td>
                  <td>500</td>
                  <td><span class="label label-default">xxx</span></td>
                  <td>
                    <div class="form-inline text-right">
                      <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}/edit" method="post">
                        <button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-pencil"></i></button>
                      </form>
                      <form class="form-group" action="{{url('invobj')}}/{{$obj->id}}" method="post">
                        <input name="_method" type="hidden" value="DELETE">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <button class="btn btn-warning btn-xs"><i class="glyphicon glyphicon-remove"></i></button>
                      </form>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我在每一行中添加了 data-val，函数 check() 将记录所选行的值。

【讨论】：

我不需要索引我需要复选框值，而不是行索引，现在这些复选框并没有做他们应该做的事情，即从客户端发送数据到服务器跨度>
@madalinivascu 我已经更新了 sn-p 以显示所选行的值。选择任何复选框并单击表格前的按钮以查看所选行的值。
所以总结一下，我需要一个隐藏的输入字段来收集所有自定义属性值并将其用作我的表单的输入

【解决方案2】：

这对我有用（取消选中所有页面）：

<script>
        var $table = $('#search-result');

        $(function () {
              $table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination')
        });

 </script>

【讨论】：

【解决方案3】：

我知道这真的很老了，但我遇到了同样的问题，上面的答案没有帮助。我终于找到了我的问题，所以想在这里发布它，以防其他人通过谷歌搜索发现这个问题（或者如果你仍在寻找答案并使用 jquery 清除复选框）

对于您上面的代码，您的复选框字段还链接到数据字段。

<th data-field="dd" data-checkbox="true">
</th>

如果后面填写的数据有dd列的值，则根据the documentation设置为true：

如果给定一个值，复选框将自动选中。也可以通过使用格式化程序来选中/取消选中复选框（返回 true 来选中，返回 false 来取消选中）。

因此，只需删除 data-field="dd" 即可解决问题。

这在某些时候通过不同版本的 bootstrap-table 发生了变化。我已经从 1.9.0 升级到 1.18.3，所以我不确定具体时间，但是从具有 <th> 属性的 data-field 中删除了 data-checkbox 属性解决了我的问题，它不再将其标记为检查页面加载。

【讨论】：