I'm using iCheck for checkbox style in bootstrap , but I'm having some issues I can't check/uncheck all ,, and dotn work refresh data table in time, need to refresh page , or page refreshed itslef.
and checkbox in premium or public , when I select it will stay checked and after i will reload page ,,
<div class="table-responsive">
<table class="table">
<!-- Start Header -->
<thead>
<tr>
<th>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_id" value="0">
</label>
</th>
<th>Text Name</th>
<th>Sixe Date</th>
<th>Created Date</th>
<th>Something</th>
<th>Premium</i>
</th>
<th>Public</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="checkbox checkbox-inline">
<input id="check" type="checkbox" name="file_id">
</label>
</th>
<td>Something</td>
<td>Size</td>
<td>Date</td>
<td>Name</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_premium_only" </label>
</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox">
</label>
</td>
</tr>
<tr>
<th scope="row">
<label class="checkbox checkbox-inline">
<input id="check" type="checkbox" name="file_id">
</label>
</th>
<td>Something</td>
<td>Size</td>
<td>Date</td>
<td>Name</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox" name="file_premium_only" </label>
</td>
<td>
<label class="checkbox checkbox-inline">
<input type="checkbox">
</label>
</td>
</tr>
</table>
</div>
<!-- /.table-responsive -->
here u can see codepen example:
http://codepen.io/anon/pen/QjvomM
You can use ifToggled iCheck event and if checked/unchecked act accordingly in the other rows using check and uncheck methods.
Ref:
https://github.com/fronteed/iCheck#callbacks
https://github.com/fronteed/iCheck#methods
Side note: I set a specific class all for the select all check and a specific class each row check selector, avoid mutiple id values.
Code:
jQuery(document).ready(function ($) {
$('input').iCheck({
checkboxClass: 'icheckbox_flat-pink',
radioClass: 'iradio_flat-pink'
});
$('input.all').on('ifToggled', function (event) {
var chkToggle;
$(this).is(':checked') ? chkToggle = "check" : chkToggle = "uncheck";
$('input.selector:not(.all)').iCheck(chkToggle);
});
});
Demo: http://jsfiddle.net/IrvinDominin/estL6xrv/
If I understand the question correctly you wish to give your page the functionality to check/uncheck a collection of iCheck checkboxes at the same time?
I achieved something similar to this with the following jQuery function..
function ToggleCheckboxes() {
var flag = $('#togglebox').is(':checked')
$("[name='PrintCheck']").each(function () {
if (flag == true) {
$(this).iCheck('check');
} else {
$(this).iCheck('uncheck');
}
});
}
This function was assigned to the onchange of the top checkbox. This would then find all of the checkboxes with the name 'PrintCheck' and either check or uncheck.
<input type="checkbox" id="togglebox" onchange="ToggleCheckboxes();">
Hope this helps!
Related
I have got a table with checkboxes. This is sort of permission table. I wanted to get the ID of the row with unchecked checkbox.
Scenario: If I uncheck field3 from Permission1 and hit save button I wanted to get the Id of permission1 row and change the name attribute to false of unchecked checkbox. I believe I can change the name attribute But I'm getting all the row ids in my console.log.
This is what I tried:
$("#savePermissionTable").click(function() {
$("#permissionTable tr").each(function() {
if($(this).find('input[type="checkbox"]
[name="true"]:not(:checked)')){
console.log($(this).attr('id'));
}
})
})
HTML:
<table class="table">
<thead>
<tr>
<th> </th>
<th data-sortable="true">field 1</th>
<th data-sortable="true">field 2</th>
<th data-sortable="true">field 3</th>
</tr>
</thead>
<tbody id="permissionTable">
<tr id="1">
<td>Permission 1</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
<tr id="2">
<td>Permission 2</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
</tbody>
</table>
I tried to search different example but nothing helped much with the unchecked checkbox.Any help what I'm doing wrong will be appreciated.
My Code: Fiddle
A selector, when passed into an if will always return true. So, instead, use $(".selector").length. Additionally, I added the name attribute update.
$("#savePermissionTable").click(function() {
$("#permissionTable tr").each(function() {
var unchecked = $(this).find('input[type="checkbox"][name="true"]:not(:checked)');
if (unchecked.length) {
console.log($(this).attr('id'));
unchecked.attr("name",false);
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<!--script src="https://raw.githubusercontent.com/719media/bootstrap-table/bootstrap4/src/bootstrap-table.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<table class="table">
<thead>
<tr>
<th> </th>
<th data-sortable="true">field 1</th>
<th data-sortable="true">field 2</th>
<th data-sortable="true">field 3</th>
</tr>
</thead>
<tbody id="permissionTable">
<tr id="1">
<td>Permission 1</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
<tr id="2">
<td>Permission 2</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
<td>
<input class="form-check-input" type="checkbox" name="true" checked>
</td>
</tr>
</tbody>
</table>
<div class="text-right">
<button type="button" class="btn btn-primary" id="savePermissionTable"> Save </button>
</div>
An alternative way would be this one.
$("#savePermissionTable").click(function() {
$("input[name='true']:not(:checked)").each(function() {
var el = $(this).parents('tr')[0];
$(this).prop("name",false);
console.log($(el).prop('id'));
})
});
You can check it in this Fiddle
I have a table where it shows the list of deleted items.
User can either recover the item or delete permanently. i need help in making only one checkbox is checked in a table row and uncheck other checkbox when user try to check both. Also when checkbox is checked in table header, it should select all the checkboxes in that td.
$(function() {
$('input.example').on('change', function() {
$("tr").closest('input.example').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app>
<table>
<th>
<label>
<input type="checkbox" class="example" />Recover</label>
<label>
<input type="checkbox" class="example" />Delete</label>
</th>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
</table>
</div>
This is exactly the scenario where you should be using radio inputs, not checkboxes, as you get this behaviour by default without the need for any JS code. All you have to do is group the required input elements by their name attribute. Try this:
<div ng-app>
<table>
<th>
<label><input type="radio" name="foo1" />Recover</label>
</th>
<th>
<label><input type="radio" name="foo1" />Delete</label>
</th>
<tr>
<td>
<input type="radio" name="foo2" />
</td>
<td>
<input type="radio" name="foo2" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="foo3" />
</td>
<td>
<input type="radio" name="foo3" />
</td>
</tr>
</table>
</div>
i figured it out myself without using radio buttons and its working fine.
JS code
$scope.uncheckPermDelete = function (ip) {
if($("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', false);
ip.perm_delete = 0;
}
};
$scope.uncheckRecover= function (ip) {
if($("input[name=recover_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=recover_check_"+ ip.id +"]").prop('checked', false);
ip.deleted = 1;
}
};
HTML code
<td ><input class="recover_check" name="recover_check_{{ip.id}}" ng-change="uncheckPermDelete(ip)" type="checkbox" ng-model="ip.deleted" ng-true-value="0" ng-false-value="1" /></td>
I have this table:
my problem is that I want to if I check the checkbox of selected row it will enabled/desabled the "Montant" input,this is my try but it never works
I get all the rows activated!!
<table>
<thead>
<tr>
<th >
<input type="checkbox" />
</th>
<th>Montant</th>
</tr>
</thead>
<tbody ng-model="finalOperationsList">
<tr ng-repeat="item in finalOperationsList track by $index ">
<td class="TableHeaderalignment"><input type="checkbox"
ng-model="finalOperationsList[$index].checked" ng-change="changeMontantLBL($index)"/></td>
<td class="TableHeaderalignment">
<input type="text" class="form-control" value="{{item.montant}}" ng-disabled="montantBL" />
</td>
</tr>
</tbody>
</table>
and this is function in Controller:
$scope.changeMontantLBL =function($index){
if(true){
$scope.montantBL = false;
}
else{
$scope.montantBL = true;
}
}
so please how can I correct my code to make the input "Montant" enabled/desabled depending on the choice of selected row checkbox
thanks for help
You can directly consume the value of "finalOperationsList[$index].checked" in the ng-disabled of the input textbox, and remove the ng-change and scope.montantBL altogether.
<tr ng-repeat="item in finalOperationsList track by $index ">
<td class="TableHeaderalignment"><input type="checkbox"
ng-model="finalOperationsList[$index].checked"/></td>
<td class="TableHeaderalignment">
<input type="text" class="form-control" value="{{item.montant}}" ng-disabled="finalOperationsList[$index].checked" />
</td>
</tr>
It is also worth to note that you might have misused value="{{item.montant}}" and should use ng-model="item.montant" instead. You can also simplify your code for that row to:
<tr ng-repeat="item in finalOperationsList track by $index ">
<td class="TableHeaderalignment">
<input type="checkbox" ng-model="item.checked"/></td>
<td class="TableHeaderalignment">
<input type="text" class="form-control" ng-model="item.montant" ng-disabled="item.checked"/>
</td>
</tr>
You could just use the bound ng-model (answers[item.questID]) value itself in your ng-change method to detect if it has been checked or not.
Example:-
<input type="checkbox" ng-model="answers[item.questID]" ng-change="stateChanged(item.questID)" /> <!-- Pass the specific id -->
and
$scope.stateChanged = function (qId) {
if($scope.answers[qId]){ //If it is checked
alert('enable or disable input');
}
}
I have an HTML table as illustrated below. It is generated via PHP from a MySQL database. Using Jquery and JScript, I am able to "check all the rows" or "uncheck all the rows" using the box marked "A".
Example Screenshot picture
What I am trying to achieve is the ability to select all rows in which a specific value (e.g. Female) occurs in a specific column, by checking the appropriate box (e.g. the one marked "B"). Removing the check mark from this Box would remove all the check marks from the "Female" rows.
The ability to do this is important because the actual table contains 3500+ rows.
Try Below.
In my example I sorted only by gender, In order to filter by location and more you can add them in data attribute and modify jquery accordingly
$(function(){
$('input[type="checkbox"]').click(function(){
$('table tr').find('td:eq(0) input[type="checkbox"]').prop('checked', false);
$('div>input[type="checkbox"]').not(this).attr('checked', false)
var gender = $(this).val().toLowerCase();
$('table tr[data-sex="'+gender+'"').find('td:eq(0) input[type="checkbox"]').prop('checked', true);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row col-md-8">
<table class="table table-striped">
<tr>
<td>#</td>
<td>ID</td>
<td>Name</td>
<td>Gender</td>
<td>Location</td>
<td>Hobby</td>
</tr>
<tr data-sex="female">
<td><input type="checkbox" /></td>
<td>1</td>
<td>Ancy</td>
<td>Female</td>
<td>NY</td>
<td>Footbal</td>
</tr>
<tr data-sex="male">
<td><input type="checkbox" /></td>
<td>2</td>
<td>Anto</td>
<td>Male</td>
<td>CA</td>
<td>Chess</td>
</tr>
<tr data-sex="female">
<td><input type="checkbox" /></td>
<td>1</td>
<td>Pamela</td>
<td>Female</td>
<td>NY</td>
<td>Basket Ball</td>
</tr>
<tr data-sex="male">
<td><input type="checkbox" /></td>
<td>1</td>
<td>William</td>
<td>Male</td>
<td>LA</td>
<td>Sleeping</td>
</tr>
<tr data-sex="female">
<td><input type="checkbox" /></td>
<td>1</td>
<td>monica</td>
<td>Female</td>
<td>NY</td>
<td>Eating</td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
<div>
<input type="checkbox" value="Male"> Male
<input type="checkbox" value="Female"> Female
</div>
</div>
OK,
Server side (php) output the markup for the checkbox with:
<input type="checkbox" data-gender="female" />
then client side, when someone ticks the "female" checkbox, do this:
var checkedState = ... //get state to set,
$('.tableClassName input[checkbox]').each(function(index, item) {
var jqItem = $(item);
if(jqItem.data('gender') === 'female') {
jqItem.attr('checked', checkedState);
}
})
I've got a simple AJAX form that allows users to reorder items and operate on them at the same time. I'm using the jQuery Sortable plugin and that all seems to work well -- however, I also added in the .serialize() method to pass along additional form information. When I click the submit button without reordering everything gets passed just fine. If I reorder an item, all of the other items are sent along but the form values of the reordered item is ignored.
Here's my jQuery:
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
$(document).ready(function(){
$("#sortable tbody").sortable({
helper: fixHelper,
opacity: 0.6,
update: function(){
$('#savemessage').html('<p>Click <em>Update/Reorder</em> to save</p>');
}
});
$('#button').click(function(event){
var order = $("#sortable tbody").sortable("serialize");
order += "&" + $("form[name=dashboard]").serialize();
order += "&crudtype=update_dashboard";
$('#savemessage').html('<p>Saving changes...</p>');
$.post("/account/crud",order,function(theResponse){
$('#savemessage').html(theResponse);
});
});
});
My HTML is created through PHP but here's the rendered output:
<table class="data" id="sortable">
<thead>
<th>Name</th>
<th>Status</th>
</thead>
<form name="dashboard" id="dashboard">
<tr class="odd" id="field_10">
<td class="handle">Favorites</td>
<td><div class="inline_checkbox"><input type="radio" name="favorites" class="box_inline" value="dashboard_email"><span class="boxlabel">Dashboard and Email</span><input type="radio" name="favorites" class="box_inline" value="dashboard" checked="checked"><span class="boxlabel">Dashboard</span><input type="radio" name="favorites" class="box_inline" value="email"><span class="boxlabel">Email</span><input type="radio" name="favorites" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
</tr>
<tr class="even" id="field_1">
<td class="handle">Process Tasks</td>
<td><div class="inline_checkbox"><input type="radio" name="process_tasks" class="box_inline" value="dashboard_email" checked="checked"><span class="boxlabel">Dashboard and Email</span><input type="radio" name="process_tasks" class="box_inline" value="dashboard"><span class="boxlabel">Dashboard</span><input type="radio" name="process_tasks" class="box_inline" value="email"><span class="boxlabel">Email</span><input type="radio" name="process_tasks" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
</tr>
</form>
</table>
<input type="submit" name="submit" value="Update/Reorder Items" class="form-submit-table" id="button">
So for example, if I just click submit and alert(order); in the jQuery after building the querystring, I see the POSTed data from both items. But if I drag one over the other to reorder them, I only see the data from the item that was not moved.
Your html was not valid and it was messing up jQuery being able to find the elements.
The form tag should be outside the table. I edited your html.
<form name="dashboard" id="dashboard">
<table class="data" id="sortable">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="odd" id="field_10">
<td class="handle">Favorites</td>
<td><div class="inline_checkbox">
<input type="radio" name="favorites" class="box_inline" value="dashboard_email"><span class="boxlabel">Dashboard and Email</span>
<input type="radio" name="favorites" class="box_inline" value="dashboard" checked="checked"><span class="boxlabel">Dashboard</span>
<input type="radio" name="favorites" class="box_inline" value="email"><span class="boxlabel">Email</span>
<input type="radio" name="favorites" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
</tr>
<tr class="even" id="field_1">
<td class="handle">Process Tasks</td>
<td><div class="inline_checkbox">
<input type="radio" name="process_tasks" class="box_inline" value="dashboard_email" checked="checked"><span class="boxlabel">Dashboard and Email</span>
<input type="radio" name="process_tasks" class="box_inline" value="dashboard"><span class="boxlabel">Dashboard</span>
<input type="radio" name="process_tasks" class="box_inline" value="email"><span class="boxlabel">Email</span>
<input type="radio" name="process_tasks" class="box_inline" value="off"><span class="boxlabel">Off</span></div></td>
</tr>
</tbody>
</table>
</form>
This allowed the radio button elements to be found after sorting the rows.