I want to perform certain actions when hovering over checkbox-labels, but only when the checkboxes are checked.
How can I retrieve that information?
HTML
<input clrcheckbox="" type="checkbox" id="checks">
<label for="checks">Check</label>
JS
document.querySelector('label').onmouseover = () => {
//so here should be something like:
//if(checkbox is checked) {console.log('checked')}
console.log('over');
}
Here a solution with jQuery
<input clrcheckbox="" type="checkbox" id="checks">
<label for="checks">Check</label>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>
$(document).ready(function(){
var isChecked = function(){
if ($('#checks').filter(':checked').length > 0){
console.log('Do some action')
}
}
$('#checks').mouseover(isChecked)
$('label').mouseover(isChecked)
})
</script>
https://codesandbox.io/s/strange-sunset-nkq5q
On my SelectAll checkbox and click trigger should work for all input - which has on-click event on it.
trigger working on selectall, but uncheck selectall not working. its didnt uncheck all input
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
Below what i have did
$(document).ready(function () {
$("#SelectAll").click(function () {
$(".checkBoxClass").attr('checked', $(this).attr('checked'));
$(".checkBoxClass").change(function(){
if (!$(this).attr("checked")){
$("#SelectAll").attr("checked",false);
}
});
});
});
Above Jquery working for select-all / UN-select all checkbox - which works if i remove below trigger
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true); // if i remove this line then selectall for checkbox don't works
});
});
but i need above jquery to trigger - total_select function
function total_select(id,carat,price){
var lenChkBox = $("input[name='pid[]']:checked").length;
if(document.getElementById("pid_"+id).checked==true) {
total_select.s++;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c +=carat;
var cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p +=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
} else {
total_select.s--;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c -=carat;
cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p -=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
}
i tried many :
$(".checkBoxClass").attr('checked', true).triggerHandler('click');
$(".checkBoxClass").prop('checked', true).triggerHandler('click');
but still not working , it do check all input on 'SelectAll' and trigger total_select function with proper result , but when i do un-select/uncheck on 'SelectAll' none of my input get un-select/uncheck
You can both solve your problem and improve code quality by using unobtrusive event handlers instead of outdated on* event attributes.
Firstly you can assign each .checkBoxClass its own change event handler, which can then read the meta data from some data attributes you place on the elements.
Then the select all logic can be simplified to check/uncheck all those elements, while triggering a change event to execute the handler. As you're using jQuery, here's an example:
$('.checkBoxClass').change(function() {
if (!this.checked)
return;
// place total_select() logic here, and read the parameters from the elements' data()
console.log($(this).data());
});
$('#SelectAll').change(function() {
$('.checkBoxClass').prop('checked', this.checked).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" data-a="1" data-b="0.35" data-c="2700.00" type="checkbox">A
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" data-a="2" data-b="0.35" data-c="2700.00" type="checkbox">B
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" data-a="3" data-b="0.35" data-c="2700.00" type="checkbox">C
I found answer as below, but still any one have any other best solution let me know , thanks
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true);
$(".checkBoxClass").attr('checked', $(this).attr('checked')); //add this line and working proper - hope will help someone
});
});
I know it's not an active thread but I've jost sold a similar problem and I'd like to come out with the solution :D
With this, only those checkboxes will be checked or unchecked and (thus triggered )what have different checked property from #SelectAll.
$(function () {
$('#SelectAll').click(function () {
$('.checkBoxClass').each(function () {
if ($(this).prop('checked') !== $('#SelectAll').prop('checked')) {
$(this).trigger('click');
}
});
});
});
function total_select(id,carat,price){
alert(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ALL
<input type="checkbox" id="SelectAll" />
A
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
B
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
C
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
<div id="result">
</div>
I have checkbox column in my data table and I want to hide a button if none of checked boxes clicked.[including pagination].
below is my code I used to get the values when clicking button,pls advice,
$('#button').click(function () {
var id = "";
var oTable = $("#userTable").dataTable();
$(".groupCheckBox:checked", oTable.fnGetNodes()).each(function () {
if (id != "") {
id = id + "," + $(this).val();
} else {
id = $(this).val();
}
});
});
You can add an event listener to all of your checkboxes. Whenever something changes, you check if all of them are un-checked => disable the button, else => enable the button.
$(".groupCheckBox").on('change', function(){
if($(".groupCheckBox:checked", oTable.fnGetNodes()).length == 0){
$('#merge_button').prop('disabled', true);
}else{
$('#merge_button').prop('disabled', false);
}
});
$('#merge_button') disabled by default and a change event listener to all $('.groupCheckBox') elements.. In the event handler check if any checkbox is checked to update the button property:
$('.groupCheckBox').on('change', function() {
$('#merge_button').prop('disabled', $('input.groupCheckBox:checkbox:checked').length === 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="groupCheckBox">
<input type="checkbox" class="groupCheckBox">
<input type="checkbox" class="groupCheckBox">
<input type="checkbox" class="groupCheckBox">
<input type="checkbox" class="groupCheckBox">
<input type="checkbox" class="groupCheckBox">
<input type="checkbox" class="groupCheckBox">
<input type="checkbox" class="groupCheckBox">
<hr>
<button id="merge_button" disabled>Merge</button>
i need help to uncheck or check same radio button if button already checked? I have jquery function which is used to enable or disabled other radio buttons if already checked now i want to add some function that use for check or uncheck same radio button?
(function ($) {
$(document).ready(function () {
$('input:radio').click(function(){
var $inputs = $('input:radio')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
});
})(jQuery);
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
Although it is too late to answer, it could help others
I tried this solution.
Works very well for me!
$("input[type='radio'].myClass").click(function(){
var $self = $(this);
if ($self.attr('checkstate') == 'true')
{
$self.prop('checked', false);
$self.each( function() {
$self.attr('checkstate', 'false');
})
}
else
{
$self.prop('checked', true);
$self.attr('checkstate', 'true');
$("input[type='radio'].myClass:not(:checked)").attr('checkstate', 'false');
}
})
Simply replace disabled with checked:
$input.prop("checked", false);
or for this element:
this.checked = false;
However, if you are looking for form element which can be checked and unchecked, maybe input type="checkbox" /> is what you need.
$inputs.filter(':checked').prop('checked', false);
I think you need checkbox instead of radio button to uncheck the checked :
<input class="checkDisable" type="checkbox" value="Test1" />Test1
<input class="checkDisable" type="checkbox" value="Test2" />Test2
<input class="checkDisable" type="checkbox" value="Test3" />Test3
<input class="checkDisable" type="checkbox" value="Test4" />Test4
(function ($) {
$(document).ready(function () {
$('input:checkbox.checkDisable').change(function(){
var $inputs = $('input:checkbox.checkDisable')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
$(this).prop('checked',false);
}
})
});
})(jQuery);
The answer of Pablo Araya is good, but ...
$self.prop('checked', true);
is superfluous here. The radio button already has a checked state for every click.
I have the following html code:
<input type="checkbox" id="ckbCheckAll" />
<p id="checkBoxes">
<input type="checkbox" class="checkBoxClass" id="Checkbox1" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox3" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox5" />
<br />
</p>
When user checks ckbCheckAll all checkboxes must be checked. Also I have following jquery code:
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").attr('checked', this.checked);
});
});
When I see my page in the browser I get the following result:
In the first click on ckbCheckAll all checkboxes were checked (which is correct). In the second click on ckbCheckAll all checkboxes were unchecked (which is correct). But in 3rd attempt nothing happened! also in 4th attempt nothing happened and so on.
Where is the problem?
Use prop
$(".checkBoxClass").prop('checked', true);
or to uncheck:
$(".checkBoxClass").prop('checked', false);
http://jsfiddle.net/sVQwA/
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
Updated JSFiddle Link: http://jsfiddle.net/sVQwA/1/
Here is a simple way to do this :
Html :
<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>
jquery :
$(document).ready(function(){
$("#selectall").click(function(){
if(this.checked){
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', true);
})
}else{
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', false);
})
}
});
});
Use below code..
$('#globalCheckbox').click(function(){
if($(this).prop("checked")) {
$(".checkBox").prop("checked", true);
} else {
$(".checkBox").prop("checked", false);
}
});
$('.checkBox').click(function(){
if($(".checkBox").length == $(".checkBox:checked").length) {
//if the length is same then untick
$("#globalCheckbox").prop("checked", false);
}else {
//vise versa
$("#globalCheckbox").prop("checked", true);
}
});
Try the following simple code:
$('input[type=checkbox]').each(function() { this.checked = true; });
Source: How to reset all checkboxes using jQuery or pure JS?
use this
if (this.checked)
$(".checkBoxClass").attr('checked', "checked");
else
$(".checkBoxClass").removeAttr('checked');
also you can use prop please check http://api.jquery.com/prop/
I have seen many answers to this question and found some answer is lengthy and some answer is a little bit wrong. I have created my own code by using the above IDs and class.
$('#ckbCheckAll').click(function(){
if($(this).prop("checked")) {
$(".checkBoxClass").prop("checked", true);
} else {
$(".checkBoxClass").prop("checked", false);
}
});
$('.checkBoxClass').click(function(){
if($(".checkBoxClass").length == $(".checkBoxClass:checked").length) {
$("#ckbCheckAll").prop("checked", true);
}else {
$("#ckbCheckAll").prop("checked", false);
}
});
In the above code, where user clicks on select all checkbox and all checkbox will be selected and vice versa and second code will work when the user selects checkbox one by one then select all checkbox will be checked or unchecked according to a number of checkboxes checked.
$(document).ready(function() {
$('#ckbCheckAll').click(function() {
$('.checkBoxClass').each(function() {
$(this).attr('checked',!$(this).attr('checked'));
});
});
});
OR
$(function () {
$('#ckbCheckAll').toggle(
function() {
$('.checkBoxClass').prop('checked', true);
},
function() {
$('.checkBoxClass').prop('checked', false);
}
);
});
Try this
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$("#checkBoxes input").prop('checked', $(this).prop('checked'));
});
});
That should do it :)
$(document).ready(function(){
$('#ckbCheckAll').click(function(event) {
if($(this).is(":checked")) {
$('.checkBoxClass').each(function(){
$(this).prop("checked",true);
});
}
else{
$('.checkBoxClass').each(function(){
$(this).prop("checked",false);
});
}
});
});
Use prop() instead -
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").each(function(){
if($(this).prop("checked", true)) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
});
});
BUT I like #dmk's much more compact answer and +1'd it
$(document).ready(function () {
$(".class").on('click', function () {
$(".checkbox).prop('checked', true);
});
});
Let i have the following checkboxes
<input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br>
<input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br>
<input type="checkbox" name="vehicle" value="Car" id="chk_car">car
<input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br>
<input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty
Here is the simple code to select all and diselect all when the selectall check box will click
<script type="text/javascript">
$(document).ready(function () {
$("#chk_selall").on("click", function () {
$("#chk_byk").prop("checked", true);
$("#chk_car").prop("checked", true);
$("#chk_bus").prop("checked", true);
$("#chk_scooty").prop("checked", true);
})
$("#chk_selall").on("click", function () {
if (!$(this).prop("checked"))
{
$("#chk_byk").prop("checked", false);
$("#chk_car").prop("checked", false);
$("#chk_bus").prop("checked", false);
$("#chk_scooty").prop("checked", false);
}
});
});
</script>
checkall is the id of allcheck box and cb-child is the name of each checkboxes that will be checked and unchecked depend on checkall click event
$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";
});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
jQuery( function($){
// add multiple select / deselect functionality
$("#contact_select_all").click(function () {
if($("#contact_select_all").is(":checked")){
$('.noborder').prop('checked',true);
}else
$('.noborder').prop('checked',false);
});
// if all checkbox are selected, check the selectall checkbox
$(".noborder").click(function(){
if($(".noborder").length == $(".noborder:checked").length) {
$("#contact_select_all").attr("checked", "checked");
} else {
$("#contact_select_all").removeAttr("checked");
}
});
});
I know its too late, but I'm posting this for the upcoming developers.
For select all checkbox we need to check three conditions,
1. on click select all checkbox every checkbox should get selected
2. if all selected then on click select all checkbox, every checkbox should get deselected
3. if we deselect or select any of the checkbox the select all checkbox also should change.
with these three things we'll get a good result.for this you can approach this link https://qawall.in/2020/05/30/select-all-or-deselect-all-checkbox-using-jquery/
I got my solution from here, they have provided solution with examples.
<table>
<tr>
<th><input type="checkbox" id="select_all"/> Select all</th>
</tr>
<tr>
<td><input type="checkbox" class="check" value="1"/> Check 1</td>
<td><input type="checkbox" class="check" value="2"/> Check 2</td>
<td><input type="checkbox" class="check" value="3"/> Check 3</td>
<td><input type="checkbox" class="check" value="4"/> Check 4</td>
<td><input type="checkbox" class="check" value="5"/> Check 5</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.check').each(function(){
this.checked = true;
});
}else{
$('.check').each(function(){
this.checked = false;
});
}
});
$('.check').on('click',function(){
if($('.check:checked').length == $('.check').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
hope this will help anyone ...:)
Add jquery-2.1.0.min.js file
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
Write the codes given below:
<script>
$(document).ready(function () {
$("#checkAll").change(function() {
var checked = $(this).is(':checked'); // Get Checkbox state
if (this.checked) //If true then checked all checkboxes
$(".classofyourallcheckbox").prop('checked', true);
else
$(".classofyourallcheckbox").prop('checked', false); //or uncheck all textboxes
});
});
</script>