bootstrap-table checkboxes are checked on page load

madalinivascu picture madalinivascu · Mar 6, 2017 · Viewed 14.6k times · Source

I am using bootstrap-table and i am trying to set up checkboxes, the problem is that the checkboxes are initiated as checked for no particular reason

demo:http://jsfiddle.net/e3nk137y/12160/

Second question, how do i add a name and a value to the checkboxes, i have tried to return a value/custom attribute from a data-formatter function but didn't see any alteration in the dev tool

The documentation doesn't mention any attribute/function/event to customise thouse checkboxes

Update it seems that if you want to sort the selected elements the first column (checkbox column) disappears

Answer

Kiran Shakya picture Kiran Shakya · Mar 7, 2017

It is actually quite funny to see the bootstrap-table breaking down when it finds whitespace character in your table cells. Once they are trimmed of any whitespace characters including line breaks, the problems seem resolved on their own.

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>

I have added data-val in each row and function check() will log the values of selected rows.