If I have the following sample code:
<table id="table1">
<tr>
<td><input type="checkbox" id="first">first thing</td>
</tr>
</table>
<table id="table2">
<tr>
<td><input type="checkbox" id="second">second thing</td>
<td><input type="checkbox" id="third">third thing</td>
<td><input type="checkbox" id="fourth">fourth thing</td>
<td><input type="checkbox" id="fifth">fifth thing</td>
</tr>
</table>
I am trying to make such that if you uncheck the 'first thing' box, all other boxes uncheck as well (if they were checked). Also, want to include that if any of the boxes 2 through 5 are checked, then box 1 must be checked as well.
Uncheck all other boxes when first is unchecked:
$('#first').change(function() {
if ($(this).prop('checked') == false) {
$('#table2 input[type="checkbox"]').prop('checked', false);
}
});
Check the first box upon checking anything in table 2:
$('#table2 input[type="checkbox"]').change(function() {
if ($(this).prop('checked') == true) {
$('#first').prop('checked', true);
}
});
Fiddle here: https://jsfiddle.net/166gv8tc/
This solves your problem:
// by checking first check/unchecks all
$('#first').change(function() {
if ($(this).prop('checked') == true) {
$('#table2 input[type="checkbox"]').prop('checked', true);
} else if ($(this).prop('checked') == false) {
$('#table2 input[type="checkbox"]').prop('checked', false);
}
});
// if any checked check first
$('#table2 input[type="checkbox"]').change(function() {
if ($(this).prop('checked') == true) {
$('#first').prop('checked', true);
}
});
// if all checked check first, if none checked uncheck first
$('#table2 input[type="checkbox"]').change(function() {
var allchecked = true;
$('#table2 input[type="checkbox"]').each(function () {
console.log('check');
if ($(this).prop('checked') == false) {
allchecked = false;
}
});
if (allchecked) {
$('#first').prop('checked', true);
} else {
$('#first').prop('checked', false);
}
});
Fiddle: http://jsfiddle.net/ddan/go09n70n/1/
Related
Adding of text field are generated by jquery. I just want to enable the submit button after the input text field are typed in. Thanks. Here's the code: https://jsfiddle.net/akoni/kL8jdpdc/
I tried this code, but no luck.
(function() {
$('form > input').keyup(function() {
var empty = false;
$('body').find('input[type="text"]').each(function() {
if (($(this).val() == '')) {
empty = true;
}
});
if (empty) {
$('#submit').attr('disabled', 'disabled');
} else {
$('#submit').removeAttr('disabled');
}
});
})()
The issue that you actually faced explained here, basically you should use on() instead of keyup(). And
input[type="text"]
will return less count then form > input, here is the changes
$(document).on("keyup", "input[type='text']", function() {
var empty = false;
$('input[type="text"]').each(function() {
if (($(this).val() == '')) {
empty = true;
}
});
if (empty) {
$('#submit').attr('disabled', 'disabled');
} else {
$('#submit').removeAttr('disabled');
}
});
jsfiddle result
Hope helps,
You must use delegation binding for any html elements that is dynamically added.
Try change $('form > input').keyup(function() {
to $('form').on('keyup','input',function() {
Good luck!
This should right about do it:
(function() {
$("form > input").keyup(function() {
var text = $("form > input").val();
if (text == "") {
$('#submit').attr('disabled', 'disabled');
} else {
$('#submit').removeAttr('disabled');
}
});
})()
Here you go with a solution https://jsfiddle.net/kL8jdpdc/9/
(function() {
$('form').on('keyup', 'input[type="text"]', function() {
var empty = false;
$('input[type="text"]').each(function() {
if (($(this).val() == '')) {
empty = true;
}
});
if (empty) {
$('#submit').attr('disabled', 'disabled');
} else {
$('#submit').removeAttr('disabled');
}
});
})()
var i=1;
$(".addmore").on('click',function(){
$('#submit').attr('disabled', 'disabled');
count=$('table tr').length;
var data="<tr><td><input type='checkbox' class='case'/></td>";
data +="<td><input type='hidden' id='process_id"+i+"' name='process_name"+i+"'/>P"+i+"</td><td><input type='text' id='burst_id"+i+"' class='text-input-grey' name='burst_name"+i+"'/></td></tr>";
$('table').append(data);
i++;
});
function select_all() {
$('input[class=case]:checkbox').each(function(){
if($('input[class=check_all]:checkbox:checked').length == 0){
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
}
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action='' class='subscription-table'>
<table width="500" align='center' border="1" cellpadding="10" cellspacing="5">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>Process</th>
<th>Burst Time</th>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add Process</button>
<input id="submit" type="submit" name="submit" disabled="disabled"/>
</form>
Use $('form').on('keyup', 'input[type="text"]' instead of $('form > input'), if you select only input then it will select checkboxes as well.
When you add a new row, you need to disable the submit button as well $('#submit').attr('disabled', 'disabled'); added to the click event of .addmore button.
Hope this will help you.
I am trying to figure out how to set toggle switch button base on a value. I am using bootstrap for the button. Anyone please tell me what is wrong?
*user.isActive only have two value either true or false.
<td><input id="activeSwitch" data-toggle="toggle" data-on="Active" data-off="InActive" data-onstyle="danger" data-width="90" data-height="30" style="font-size:38px" type="checkbox">
<input type="hidden" id="activeStatus" value='${user.isActive}'/></td>
<script>
$(document).ready(function() {
if($('#activeStatus').val() == 'true'){
$("#activeSwitch").attr("checked", "checked");
}
else if($('#activeStatus').val() == 'false'){
...
}
});
</script>
I found the answer so wanted to share with people who need help too. For people using bootstrap use:
$(document).ready(function() {
if ($('#activeStatus').val().trim() == 'true') {
$("#activeSwitch").bootstrapToggle('on');
} else if ($('#activeStatus').val().trim() == 'false') {
$("#activeSwitch").bootstrapToggle('off');
}
});
Use .bootstrap('on') instead of prop or attr if they are not working.
Try like this prop() instead of attr => prop('checked',true). use Boolean value instead of string
updated
Do with trim() its remove the unwanted space
$(document).ready(function() {
if ($('#activeStatus').val().trim() == 'true') {
$("#activeSwitch").prop("checked", true);
} else if ($('#activeStatus').val().trim() == 'false') {
$("#activeSwitch").prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input id="activeSwitch" data-toggle="toggle" data-on="Active" data-off="InActive" data-onstyle="danger" data-width="90" data-height="30" style="font-size:38px" type="checkbox">
<input type="hidden" id="activeStatus" value='true' /></td>
or single line code
$(document).ready(function() {
$("#activeSwitch").prop("checked" , $('#activeStatus').val().trim() == 'true')
})
I've multiple checkbox inputs while some them are disabled. So when I click select all/unselect all the checkbox at the top, I want to apply this event for the only enabled check boxes. Also when I've all the checkboxes checked by clicking on each one, then the select all checkbox must be clicked.
Note : Also I've one functionality, when the enabled checkbox is clicked and followed by the save click, then that particular checkbox will be disabled.I can add a new checkbox using add new checkbox button. When a new checkbox is added the select all/unselect all checkbox must be unchecked.
HTML
<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
<tr>
<td>
<input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
</tr>
</table>
<button id="add">
Add check box
</button>
<button id="save">
Save
</button>
JQuery
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
$(document).ready(function() {
$('.checkBoxClass').click(function() {
var selected = $('.checkBoxClass').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
});
$(document).ready(function() {
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
})
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
})
Fiddle
To detect disabled check boxes you can use jquery filter method like this:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));
by using filter like this, JQuery changes checkboxes that have not disabled attribute.
and use .prop('checked', false) or .attr('checked', false) to uncheck checkboxes on add new checkbox button.
so to uncheck select all on save and add checkbox use:
$("#ckbCheckAll").attr('checked', false);
and to uncheck all enabled checkboxes on addcheckbox use:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', false);
You should also use $(document).on("click",".checkBoxClass",function(){}) binder to let JQuery bind click event for dynamically added checkboxes. by doing that and add some extra jquery, select all checkbox, checked when ever all checkboxes are checked.
Updated Fiddle
try this, it will get only enable checkobox and select/unselect them.
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass:enabled").prop('checked', $(this).checked);
});
});
check fiddle
http://jsfiddle.net/p73wW/8/
Try this :
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
var checked = false;
if($(this).prop('checked') == true) {
checked = true;
}
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
$(this).find(".checkBoxClass").prop('checked', checked);
}
});
});
$('.checkBoxClass').click(function() {
var i = 1;
var totalCheckboxes = $("#myTable tbody tr").length;
if($(this).prop('checked') == true) {
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
if($(this).find(".checkBoxClass").prop('checked') == true) {
i++;
}
}
});
}
if(i==totalCheckboxes) {
$("#ckbCheckAll").prop('checked', true);
} else {
$("#ckbCheckAll").prop('checked', false);
}
});
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
$("#ckbCheckAll").prop('checked', false);
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});
Updated Fiddle
Here is another method. Instead of using filter I have used :enabled. Also used on jquery to detect new added checkbox. Hope it will help you.
$(document).on('click','.checkBoxClass',function() {
var selected = $('.checkBoxClass:enabled').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
demo
I have some little problems about testing if a checkbox is checked with jQuery. I've a table and in every row a checkbox with the same ID.
<td><input id="hp" type="checkbox" aria-label="..." checked></td>
This is the jQuery function:
$('#hp').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
But it only works with the first row of table. Any suggestions?
try like
<td><input id="hp" type="checkbox" class='checkBoxClass'></td>
and
$('.checkBoxClass').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
Change your code as below :
HTML Code
<td><input id="hp" class="hp" name="hp[]" type="checkbox" aria-label="..." checked></td>
Javascript
$('.hp').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
I hope it work for you.
how about?
$('input[type="checkbox"]').bind("click", function() {
if(this.checked) {
alert("check");
} else {
alert ("unchecked!");
}
});
DEMO
http://jsfiddle.net/n2cgnodp/
So, ID must be unique, if you use #hp on multiple elements, jQuery / JS will return only the first one!
Use .class instead:
jsBin demo
<input class="hp" type="checkbox" aria-label="..." checked>
$(".hp").on("change", function(){
alert(this.checked? "YEY!" : "Not checked :( ");
});
If there is no way other than giving same id to each checkbox then go for following code:
$('body #hp').bind("click", function() {
if($(this).prop('checked')) {
alert("check");
} else {
alert ("unchecked!");
}
});
Here $('body #hp') will give you all the elements with same id as hp
I have a jquery datatable. One of its column consists of checkboxes as you can see here . Now, when I click the checkboxes on the rows they work fine. I mean it prints out one of the single select class checkbox is checked or one of the single select class checkbox is unchecked, since I added these on the event handler. However, if I click select all once, my individual checkboxes does not run anymore (it does not print out these messages).Select all checkboxes look like work fine. (selects all individual boxes). Here is my select all and single select checkbox related code :
SelectAll handler :
$('input[type="checkbox"][id="selectAll"]').click(function () {
if ($(this).prop("checked") == true) {
converter.checkAll(true);
} else if ($(this).prop("checked") == false) {
converter.checkAll(false);
}
});
checkAll function
Converter.prototype.checkAll = function (checktoggle) {
var data = (this.resultTable).fnGetData();
for (var i in data) {
var row = $('<div>' + data[i][3] + '</div> ');
row.children('input').attr('checked', (checktoggle) ? 'checked' : false);
row.children('input').attr('id', 'singleSelect');
console.log(row.html());
(this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
}
(this.resultTable).fnDraw();
}
Single Select Handler
$('input[type="checkbox"][id="singleSelect"]').click(function () {
alert("asdasdasdasd");
if ($(this).prop("checked") == true) {
alert('one of the single select class checkbox is checked');
} else if ($(this).prop("checked") == false) {
alert('one of the single select class checkbox is unchecked');
}
});
Use this mode
SelectAll handler :
// note change event
$('input[type="checkbox"][id="selectAll"]').change(function () {
converter.checkAll($(this).prop("checked"));
});
checkAll function
Converter.prototype.checkAll = function (checktoggle) {
var data = (this.resultTable).fnGetData();
for (var i in data) {
var row = $('<div>' + data[i][3] + '</div> ');
row.children('input').prop('checked', checktoggle) ;
row.children('input').attr('id', 'singleSelect');
console.log(row.html());
(this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
}
(this.resultTable).fnDraw();
}
Single Select Handler
$('input[type="checkbox"][id="singleSelect"]').change(function () {
alert("asdasdasdasd");
if ($(this).prop("checked") == true) {
alert('one of the single select class checkbox is checked');
} else if ($(this).prop("checked") == false) {
alert('one of the single select class checkbox is unchecked');
}
});
The issue appear to be
$('input[type="checkbox"][id="selectAll"]').click(function () {
is called on input with selector [id="selectAll"] ; js at post does not uncheck all checkboxes , but creates new input elements where checked attribute is set with argument checktoggle
so what should I do in order to fix this issue ?
Difficult to confirm without html included at Question . Try utilizing .each() , setting this.checked to true , false within callback
$('input[type="checkbox"][id="selectAll"]').click(function (e) {
$("input[type=checkbox]").each(function() {
if ($(e.target).prop("checked") == true) {
this.checked = true;
converter.checkAll(true);
} else {
this.checked = false;
converter.checkAll(false);
}
})
});
We can make check/uncheck jQuery datatable by using checkbox names of child rows.
<script type="text/javascript">
$(function () {
$("#chkAll").click(function () {
$("input[name='employees']").attr("checked", this.checked);
});
$('#example').DataTable({
});
});
</script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th align="left"><input type="checkbox" id="chkAll" /></th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="employees" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" name="employees" /></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
it works fine for more details http://www.infinetsoft.com/Post/How-to-check-all-rows-in-jQuery-datatables-grid/1255