I have a checkbox which will toggle some other check boxes on a html form:
<input type="checkbox" name="selector" onclick="toggle_all(this);"/>
<script language="javascript">
function toggle_all(source) {
var checkboxes = $(":input[name^='form[r']");
if($(source).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
alert('done');
}
</script>
First time I click the "selector" check box, all check boxes with names starting "form[r" will be checked. Then when "selector" check box is unchecked, all others are unchecked as well. Since then checking/unchecking "selector" checkbox doesn't affect other checkboxes. The code is running because alert('done') shows up. What's wrong here?
I would suggest an improvement. Change HTML, add some class to all your checkboxes:
<input class="check" type="checkbox" name="form[r]">
And JS:
function toggle_all(source) {
$(".check").prop('checked', source.checked);
}
http://jsfiddle.net/tFv3G/
And the reason why is that searching elements by its attributes much slower than by class name. And less readable as well.
You need to escape the square bracket in selector
Change
var checkboxes = $(":input[name^='form[r']");
To
var checkboxes = $(":input[name^='form\[r']");
I'd recomment using this code to select/deselect all checkboxes:
$('input#select-all').change(function(){
var checked = $(this).prop('checked');
$(":input[name^='form[r']").prop('checked', checked);
});
Related
I have two check boxes (ON/OFF) that I want to make dependent in jQuery, this means that when I check the first (checkbox1) ON, the second (checkbox2) will automatically turn ON, i've tried this solution but it not works, can someone help me please.
//php
$cus_centre = $this->createElement('checkbox', 'checkbox1');
$cus_centre->setLabel($translate->_("Checkbox1"));
// ->setAttrib("disabled", "disabled");
$this->addElement($cus_centre);
$checkbox2 = $this->createElement('checkbox', 'checkbox2');
$checkbox2->setLabel($translate->_("Checkbox2"));
// ->setAttrib("disabled", "disabled");
$this->addElement($checkbox2);
//jQuery
$('#checkbox1').iphoneStyle({
onChange:function(){
if($("#checkbox1").is(':checked')){
$("#checkbox1").val(1);
$("#checkbox2").attr('checked', true);
$("#checkbox2").val(1);
}
}
});
My Checkboxes view
You can make it simply like this. Using $(this) inside the function (change listener) to check if the first checkbox is checked. If so, it will mark the second one.
$('#checkbox1').change(function() {
if(this.checked) {
$("#checkbox2").prop("checked", true);
}
});
You can try this.
$('#chkBox1').change(() => {
$('#chkBox2').prop('checked', $('#chkBox1').prop('checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="chkBox1" type="checkbox">
<input id="chkBox2" type="checkbox">
I am trying to create a JS function that will ensure all checkboxes in my form are selected.
I have tried the following, but it isn't working. There are other checkboxes in another from on this page so I am wondering if this is conflicting? I thought using $(this) would fix that issue...
$('#my-form').on('submit', function(e) {
e.preventDefault();
var checked = false;
$('#input[type="checkbox"]').each(function() {
if ($(this).is(":checked")) {
checked = true;
}
});
if (checked == false) {
console.log('Something wasnt checked');
}
});
Can any advise what I am doing wrong here please?
Your code checks if any of the checkboxes are checked.
Change the code to
var checked = true;
And set the variable to false, if the checkbox in the loop is NOT checked.
"#" is used to query elements by their ID, so $("#input") would target only one input that has id="input". You should instead do this:
$("input[type='checkbox']")
or, if you don't want all checkboxes on the page you will need to use some other selector, etc. add class "some-class" to all inputs that you want to check and use:
$(".some-class")
Also, you will need to revert your logic, cause currently you will set checked to true if any of the checkboxes is checked. So, initially use checked = true, then in if statement set it to false if it's not checked.
Just check :checked checkbox length based upon that set your variable like below.
$('input[type="checkbox"]').click(function() {
var checked = false;
if ($('input[type="checkbox"]:checked').length == $('input[type="checkbox"]').length)
checked = true;
if (checked == true)
console.log('checked');
else
console.log('false');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input checked="checked" type="checkbox">
<input checked="checked" type="checkbox">
My HTML code to select all checkboxes
Select All <input type="checkbox" name='select_all' id='select_all' value='1'/>
My Javascript code to select all checkboxes
<script type="text/javascript">
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked'))
{
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
});
</script>
The code works great and selects all the checkboxes, I would like to exclude the following checkbox from the selection (select all) criteria, is it possible to exclude the following?
<input type="checkbox" name='sendtoparent' id='sendtoparent' value='1'/>
Try using the not method:
$(this).closest('form').find(':checkbox').not('#sendtoparent');
Firstly you can use :not or not() to exclude the element by its id attribute. From there you can simplify the logic by just setting the checked property of those checkboxes to match that of the #select_all element. Try this:
$('#select_all').change(function() {
var $checkboxes = $(this).closest('form').find(':checkbox').not('#sendtoparent');
$checkboxes.prop('checked', this.checked);
});
So I have a ajax search form which gives results with a checkbox:
Here is part of PHP code for each search result:
<input type="checkbox" class="lovkrav_checkbox checkbox_search" name="lovkrav['.$lovkrav_id.']" value="'.$lovkrav_id.'" orig-id="lovkrav'.$lovkrav_id.'" id="lovkravs'.$lovkrav_id.'" '.$checked.'/>
and there is a twin checkbox already on website with the same name but with different id.
By using "orig-id" property I am getting the id of the twin checkbox. Both checkboxes have same class lovkrav_checkbox.
I came to the point where the click event is detected by the twin checkbox as it should but not the checkbox you clicked on!
Here is the code:
$(document).on("click",".lovkrav_checkbox",function(e){
toggle_id = document.getElementById($(this).attr("orig-id"));
$(toggle_id).trigger("click");
});
What I want to achieve is when a user clicks on one checkbox - the twin checkbox (the one with same name property) will be checked/unchecked as well.
What am I doing wrong?
Would be easier to toggle the checked state with vanilla javascript.
HTML
<input type="checkbox" name="test">
<input type="checkbox" name="test">
JS
//All of the checkboxes
var $checkboxes = $("input[type=checkbox][name=test]");
//The event handler
$checkboxes.on("click", function() {
//Get the state of the check box you clicked
var checkedState = this.checked
//Make it the state of all the checkboxes
$checkboxes.each(function() {
this.checked = checkedState;
});
});
Here is the fiddle
You can try this:
DEMO
$(document).on("click",".check",function(e){
$("."+this.className).prop("checked", this.checked);
});
Try this too:
js:
$(document).on("click",".lovkrav_checkbox",function(e){
toggle_id = $(this).attr("name");
isChecked = $(this).prop("checked");
$("input:checkbox").each(
function(){
if($(this).attr("name") == toggle_id && isChecked){
$(this).prop("checked",true);
}
else{
$(this).prop("checked",false);
}
});
});
fiddle
Try this
$("input[type=checkbox][name=test]").prop("checked",true);
I am trying to show hidden text if at least one checkbox is checked and hide it if none are checked. I have a multiple checkboxes.The hidden text isn't showing when I check the checkooxes. Any help?
Here is fiddle http://jsfiddle.net/HDGJ9/1/
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<div class="txt" style="display:none">
if($('input[name="ch[]"]').is(':checked'))
$(".txt").show(); // checked
else
$(".txt").hide(); // unchecked
Enclose/wrap your code with event handler like
$('input[name="ch[]"]').on('change', function () {
//your code
});
JSFiddle
You can just check the length of checked checkboxes...
var $checkboxes = $(':checkbox');
$checkboxes.on('change', function(){
$('.txt').toggle( $checkboxes.filter(':checked').length > 0 );
});
Nothing is executing your javascript code. There are many ways to execute, and also many ways to achieve the result you want. You can assign it to a click or change event like so:
$("input[name='ch[]']").click(function() {
if($('input[name="ch[]"]').is(':checked'))
$(".txt").show(); // checked
else
$(".txt").hide(); // unchecked
});
Here is an updated fiddle that checks your function everytime you click.
In your code, the test for checked/unchecked boxes occurs only once, when the page loads. You should run this check every time the value of any of the checkboxes changes. Something like
function refresh() {
if ($('input[name="ch[]"]').is(':checked')) {
$(".txt").show(); // checked
} else {
$(".txt").hide(); // unchecked
}
}
$('input:checkbox').change(refresh);
JSFiddle: http://jsfiddle.net/MHB8q/1/
You are selecting all four checkbox elements here, you need to only select one that is checked, and see if you get a result:
if($('input[name="ch[]"]').filter(':checked').length){
$(".txt").show(); // checked
} else {
$(".txt").hide(); // unchecked
}
Demo: http://jsfiddle.net/HDGJ9/10/
$('input[name="ch[]"]').on('change', function() {
if ($(this).is(':checked')) {
$('.txt').css('display', 'block');
}
else {
var checked = false;
$('input[name="ch[]"]').each(function(i, el) {
if ($(el).is(':checked')) checked = true;
});
if (!checked) $('.txt').css('display', 'none');
}
});
Version with the least amount of event handlers:
$(document).on("change", ":checkbox", function(){
var isAtLeastOneCheckboxChecked = $(':checkbox').filter(":checked").length > 0;
if (isAtLeastOneCheckboxChecked)
$('.txt').show();
else
$('.txt').hide();
});
Fiddle: http://jsfiddle.net/3d79N/