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]">
Related
var listvalues = []
$('.check').on('change', function() {
var val = this.checked ? this.value : '';
listvalues.push(val)
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
I have a code which should push and pop checkbox value based on checkbox check and uncheck, for example if I check and checkbox it should show the value in a div and if I unselect the checkbox the value should disappear from div, and it should not allow anyone to append duplicate data.
But what I did appends even if it is duplicate it appends the data. Can anyone help me on this?
and i wanted to create separate div for each checkbox
Instead of push & pop value from array, you can get all checked values with listvalues = $('.check:checked').toArray().map(x => x.value); and display it.
$('.check:checked') will only return .check which are checked. Then .toArray() will convert jquery object into array & get use .map(x => x.value) to fetch only value from checked elements.
var listvalues = []
$('.check').on('change', function() {
listvalues = $('.check:checked').toArray().map(x => x.value).join(', ');
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
To remove you can use filter to exclude the unchecked item. I'm not sure what you want to achieve with different divs, please explain.
var listvalues = []
$('.check').on('change', function() {
if(this.checked){
listvalues.push(this.value);
}
else {
listvalues = listvalues.filter(item => item != this.value);
}
$('#show').html(listvalues.sort());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
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>
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">
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>
I have more checkbox input that call function "boxclick" when the user click on this:
<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')">
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')">
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')">
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')">
For check/uncheck all i use simple jquery script:
<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked">
My problem is when i check/uncheck all the function "boxclick" not run.
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}
I think you can do:
HTML
<input id="1box" type="checkbox" name="selected[]">
<input id="2box" type="checkbox" name="selected[]">
<input id="3box" type="checkbox" name="selected[]">
<input id="4box" type="checkbox" name="selected[]">
jQuery
If you want to check/uncheck all checkbox:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', this.checked);
});
If you want to make select any one at a time:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', false);
this.checked = !this.checked;
});
DEMO
Setting attribute of checkboxes to checked does not automatically fake a click event for you! Because you put those boxclick function calls within some "onclick" handlers, you must trigger a fake click event in order for your javascript to think that it clicked all the boxes. To trigger fake click event use $('#whatever').trigger('click'), for instance:
$('input[name*=\'selected\']').trigger('click');
If you want check/uncheck all functionality, you must say "ok, master checkbox, please listen for whenever I am checked or unchecked. When that happens, please set checked attribute of my slave boxes (your other boxes on the page) to match the master's current checked attribute." Like this:
function checkAllorUncheckAll(event){
var chiefCheckbx = event.currentTarget;
var myBoxes = $('input[name*=\'selected\']');
myBoxes.prop( "checked", $(chiefCheckbx).prop("checked") ).trigger('click');
}
$('#masterCheckBox').on('change',checkAllorUncheckAll);
I guess
$('input[name*=\'selected\']').attr('checked',
this.checked).trigger('click');
should do the trick here
Demo
http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>