function chk() {
var a = $('#chkAll').prop('checked');
if (a == true)
$('.hobbie').attr('checked', 'checked');
else
$('.hobbie').removeAttr('checked');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk()" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
If I clicked on select all checkbox its selecting all checkbox and if I click again it unchecked all checkbox but after that its not working till I refresh the page.
Use this code:
function chk(obj) {
$('.hobbie').prop('checked', $(obj).prop('checked'));
}
demo
function chk(obj) {
$('.hobbie').prop('checked', $(obj).prop('checked'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk(this)" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
No need to check if condition. Shortest way to do this.
function chk() {
$('#chkAll').on('change', function() {
$('.hobbie:checkbox').prop('checked', $(this).is(":checked"));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input onclick="chk()" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
try simple code:
$("#chkAll").click(function () {
$(".hobbie").attr('checked', this.checked);
//or
$(".hobbie").prop('checked', true);
});
One liner function
function chk(isChecked) {
$('.hobbie').prop('checked', isChecked);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk(this.checked)" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
Related
I have here multiple checkboxes which data is from the database. I want that the textbox will be remained disable until I checked or clicked the checkbox. lets just say this is the data that came from the database for example.
$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$('.checks').removeAttr('disabled');
$('.checks').focus();
} else {
$('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
Sure, you can reduce what you have to just the following, using $(this) to refer to the specific checkbox you're checking/unchecking:
$(function() {
$('.check').click(function() {
$(this).next().prop('disabled', !$(this).is(':checked'))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
$(function() {
$('.check').click(function() {
if ($(this).is(':checked')) {
$(this).next('.checks').removeAttr('disabled');
$(this).next('.checks').focus();
} else {
$(this).next('.checks').attr('disabled', 'disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"> Aldrin
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Dafne
<input type="text" class="checks" disabled>
<input type="checkbox" class="check"> Diane
<input type="text" class="checks" disabled>
I would like to have the possibility with javascript to deselect checkbox "demo2" when I deselect checkbox "demo1".
only deselect
<input type="checkbox" name="demo1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car">
<label for="vehicle2"> I have a car</label><br>
I gues you just want to have "radio" like behaviour.
You can see below how it can be done with pure JS.
<html>
<body>
<script>
function switcher(obj) {
if(obj.checked == true) {
document.getElementsByName('demo2')[0].checked = false;
document.getElementsByName('demo1')[0].checked = false;
obj.checked= true
}
}
</script>
<input type="checkbox" name="demo1" value="Bike" onclick="switcher(this)">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car" onclick="switcher(this)">
<label for="vehicle2"> I have a car</label><br>
</body>
</html>
I have multiple checkboxes that are added with AJAX. I am trying to trigger a click if the checkbox is not checked, but this is not working for all the checkboxes.
if ($(".variable_manage_stock").prop('checked') == false) {
$('.variable_manage_stock').trigger('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[0]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[1]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[2]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[3]">
You can loop through the list that you are getting by $(".variable_manage_stock") as the following code does:
var stockList = $(".variable_manage_stock");
stockList.each(function() {
if ($(this).prop('checked') == false) {
$(this).trigger('click');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[0]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[1]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[2]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[3]">
When click at id"t1", id"t2" and id"t3" changes to id"t1"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
<script>
function check_all() {
if (document.getElementById('t1').checked == true) {
$(".t2").prop("checked", true);
$(".t3").prop("checked", true);
} else {
$(".t2").prop("checked", false);
$(".t3").prop("checked", false);
}
}
</script>
The problem is due to missing # before the id selector int can be fixed by adding # instead of . in your selector. Anyways you can make it simpler by combining both the selector into one and the if condition can be replaced by using checked property value as the argument in prop() method.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
<script>
// bind change event handler or use inline onchange
// where pass the reference(this) as argument
$('#t1').change(function() {
// get both element and update property based on the
// current value of t1 checkbox
$('#t2,#t3').prop('checked', this.checked);
})
</script>
Typo: Id define by # in dom .you are adding . is define as a class
function check_all() {
if (document.getElementById('t1').checked == true) {
$("#t2").prop("checked", true);
$("#t3").prop("checked", true);
} else {
$("#t2").prop("checked", false);
$("#t3").prop("checked", false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
For more simplified version Do like this
function check_all() {
$("#t2,#t3").prop("checked", $('#t1').is(':checked'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" /> Option 1</label></p>
<p><label><input type="checkbox" /> Option 2</label></p>
<p><label><input type="checkbox" /> Option 3</label></p>
<p><label><input type="checkbox" /> Option 4</label></p>
</fieldset>
</form>
HTML:
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
jQuery:
$(".color").click(function(){
console.log($(".color:not(:checked)").val());
})
My code is working but it displaying only one element. How can I resolve this error?
You can use following script for this, Updated Fiddle
$(".color").change(function(){
$(".color").each(function(){
if (!$(this).prop("checked")) {
alert($(this).val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
#super-user has provided a perfectly acceptable answer but you could streamline this further by using the jQuery map() function to translate the array and then use join() to output the result as a string.
$(".color").click(function(){
$("p").text(jQuery.map($(".color:not(:checked)"), function(val, index) {
return $(val).val();
}).join(","));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
<p></p>
$("input[name='color[]']").each( function () {
if ($(this).is(":checked"))
{
}
else
{
}
});