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
<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/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href=".css">
<script type="text/javascript" src=".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>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
<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./jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit./wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script type="text/javascript" src="https://rawgit./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>demo:http://jsfiddle/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
Share Improve this question edited Mar 7, 2017 at 8:54 madalinivascu asked Mar 6, 2017 at 13:05 madalinivascumadalinivascu 32.4k4 gold badges41 silver badges59 bronze badges3 Answers
Reset to default 3It 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./jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit./wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script type="text/javascript" src="https://rawgit./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.
This worked for me (uncheck all pages):
<script>
var $table = $('#search-result');
$(function () {
$table.bootstrapTable('togglePagination').bootstrapTable('uncheckAll').bootstrapTable('togglePagination')
});
</script>I know this is really old, but I came across this same issue and the answers above didn't help. I finally figured out my issue, so wanted to post it here in case anyone else finds this issue through a google search (or on the off chance you're still looking for the answer and just clearing the checkboxes using jquery)
For your code above, your checkbox field also links to a data-field.
<th data-field="dd" data-checkbox="true">
</th>
If the data you fill in later has a value for the dd column, this will set as true according to the documentation:
If a value is given the Checkbox is automatically checked. Its also possible to check/uncheck the checkbox by use an formatter (return true to check, return false to uncheck).
So just removing data-field="dd" may fix the issue.
This changed at some point through the different versions of bootstrap-table. I had upgraded from 1.9.0 to 1.18.3, so I'm not sure when exactly, but removing the data-field attribute from the <th> that had the data-checkbox attribute fixed my issue and it no longer marked it as checked on page load.