I have a set of checkboxes that have a name like
form[check][..]
where .. is a number (id). I would have another checkbox that checked would check all the previous checkboxes, a sort of check/uncheck all. The problem is, how can with jQuery get all that checkboxes?
EDIT 1
this is my current html markup:
<input type="checkbox" value="1" name="form[check][1]" />
<input type="checkbox" value="1" name="form[check][2]" />
<input type="checkbox" value="1" name="form[check][3]" />
<input type="checkbox" value="1" name="form[check][..]" />
<input type="checkbox" name="checkAll" />
Add a class to the checkboxes you want checked, and select them using that class
$('.myCheckbox').prop('checked', true);
$('[name="checkAll"]').on('change', function(){
$('input[name^="form[check]"]:checkbox').prop('checked', $(this).prop('checked'));
});
Related
how do I select all checkboxes when the first radio input is selected & uncheck all checkboxes when the second radio input is selected? (Javascript)?
I've looked into previous similar questions on here, but they all seem to be about using checkboxes rather than radio buttons, or there aren't ways to unselect.
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
Get a list of HTML nodes by class using document.querySelectorAll(). Iterate the radios list using NodeList.forEach(), and add a change event listener to each radio button. Whenever the listener is called, iterate the checkboxes array with NodeList.forEach(), and update the checked value of each element:
var checkboxes = document.querySelectorAll('.custom-selector');
var radios = document.querySelectorAll('.permission');
radios.forEach(function(el) {
el.addEventListener('change', function(e) {
var checked = el.value === 'select';
checkboxes.forEach(function(el) {
el.checked = checked;
});
});
});
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
You can do it using JQuery.
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
See below Code Snippet
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
function handleChange(e) {
if (e.target.value == "select") {
handleCheckUncheck(true);
}
if (e.target.value == "deselect") {
handleCheckUncheck(false);
}
}
function handleCheckUncheck(value) {
document.querySelectorAll("input[type='checkbox']").forEach(function(val) {
val.checked = value;
})
}
document.querySelectorAll("input[type='radio']").forEach(function(val) {
val.addEventListener("change", handleChange);
})
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3
You can do it in a simple way without using jQuery.
Add a checkbox whose status will be set for others.
<label><input type="checkbox" onClick="toggle(this)" /> Select All</label>`
And use this javascript function that will check other checkboxes with the 'custom-selector' class:
function toggle(source) {
checkboxes = document.getElementsByName('custom-selector[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
If someone checks the "Select All" checkbox, all others will also be selected. If it deselects, the effect will be the same.
Regards!
I agree with #OriDrori's answer, You don't need to load jQuery to do such a simple task.
I need better validation logic, where some Checkboxes and some input fields are grouped together.
The user either have to check at least one checkbox or have to fill at least one input box.
If a checkbox is checked or an input field is filled then the complete group is validated.
What will be the best possible way to validate such a situation?
e.g
<input class="checkbox" type="checkbox" name="check-deal" value="1" grouped="deal" >
<input class="checkbox" type="checkbox" name="check-deal" value="2" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="3" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="4" grouped="deal">
<input class="input-group" type="text" name="deal-name1" value="" grouped="deal">
<input class="input-group" type="text" name="deal-name2" value="" grouped="deal">
I have defined an extra attribute grouped for all input and checkboxes that should be grouped togather
but getting no idea how to validate the group as best practice.
DEMO
Point No.1 : There isn't any attribute called grouped for html as of my knowledge but I would suggest you to use data-* prefixed attribute names like data-grouped or data-anyname which is valid
Point No.2 : I rather categorized your checkboxes and textboxes into separate divs and below is how it is:
<div class="chkbox">
<input class="checkbox" type="checkbox" name="check-deal" value="1" />
<input class="checkbox" type="checkbox" name="check-deal" value="2" />
<input class="checkbox" type="checkbox" name="check-deal" value="3" />
<input class="checkbox" type="checkbox" name="check-deal" value="4" />
</div>
<div class="txtbxs">
<input class="input-group" type="text" name="deal-name1" value="" />
<input class="input-group" type="text" name="deal-name2" value="" />
</div>
<button class="btnValidate">Validate</button>
Point No.3 : Below is how you can validate using jquery
$('.btnValidate').on('click',function(){
var chkLength=$('.chkbox .checkbox:checked').length; //get checkbox checked length
var filledText=$(".txtbxs .input-group").val()!="";
//get bool value whether any of the text box is filled or not
if(chkLength || filledText) //check with or condition
alert('valid')
else
alert('invalid');
});
UPDATE
DEMO
As #AkshatG pointed in his answer the discrepancy was there in my answer so I've edited it and here is the updated solution.
$('.btnValidate').on('click',function(){
var chkLength=$('.chkbox .checkbox:checked').length;
var filledText=false; //First set it to false
$.each($(".txtbxs .input-group"),function(index,value){
if($(value).val()!="")
{
filledText=true//if it finds any value then set it to true
return;//break from $.each
}
})
if(chkLength || filledText)
alert('valid')
else
alert('invalid');
});
You first need to take count of each validations. And then check if any of the two has count greater than 0 or not. Guruprasad's answer won't work if you enter text on second textbox because it won't filter all the textboxes. You have to use filter function for this :
$("input[type='text'],textarea").filter(function() {
return $(this).val() != "";
}).length;
Here's a jsfiddle :
http://jsfiddle.net/myfLgpdv/
Hope this helps.
i have two checkboxes. i want this algorithm happen:
if i check checkbox1 i want checkbox 2 to be uncheck,
then if i check checkbox2 i want checkbox1 to be unchecked.
therefore, i need to select one checkbox only.
and i want this in jquery.
thank you..
HTML
<input type="checkbox" name="checkme" id="cc1">Check Me1</input>
<input type="checkbox" name="checkme" id="cc2">Check Me2</input>
JavaScript
$('#cc1').change(function(){
var c = this.checked ? $('#cc1').prop('checked', true) : $('#cc2').prop('checked', false);
});
$('#cc2').change(function(){
var c = this.checked ? $('#cc2').prop('checked', true) : $('#cc1').prop('checked', false);
});
http://jsfiddle.net/z4nKW/
$('#cc1').change(function(){
$('#cc2').prop('checked', !$(this).prop('checked'));
});
$('#cc2').change(function(){
$('#cc1').prop('checked', !$(this).prop('checked'));
});
Maybe radio buttons are better fit for such case.
THE DEMO>
this, by itself is a javascript element and therefor doesn't have a property "checked".
You need to wrap it in jQuery like so:
$(this).checked
Radio buttons ensure that only one item is selected:
<form>
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
</form>
source (w3schools)
Use radio buttons:
<input type="radio" name="option">Option 1</input>
<input type="radio" name="option">Option 2</input>
you can also do this
Html:
<input type="checkbox" name="checkme" class="check" id="cc1">Check Me1</input>
<input type="checkbox" name="checkme" class="check" id="cc2">Check Me2</input>
JQuery
$(".check").each(function()
{
$(this).change(function()
{
$(".check").prop('checked',false);
$(this).prop('checked',true);
});
});
I used checkbox in two items now I can get the value of the second group of checkbox.
The first group of checkbox I use:
<input name="option" type="checkbox" value="1" id="option1">option 1
<input name="option" type="checkbox" value="2" id="option2">option 2
Then
<input name="choice" type="checkbox" value="1" id="choice1">choice 1
<input name="choice" type="checkbox" value="2" id="choice2">choice 2
How can i get the value of selected checkboxes, in each group it is only allowed to select 1 checkbox.
I just need the javascript function
You want a radio button, (where only one option can be selected at a time)
<input name="option" type="radio" value="1" id="option1">option 1
<input name="option" type="radio" value="2" id="option2">option 2
Checkboxes can be grouped into arrays by appending [] to the end of their names:
<input name="option[]" type="checkbox" value="1" id="option1">option 1
<input name="option[]" type="checkbox" value="2" id="option2">option 2
This will not get the effect you want, it will instead group the checkboxes so that all input from them will result in one array. it is still possible to select multiple checkboxes with this method.
You can use this following codes to get the value of the checkbox if you are using multiple checkboxes.
$('input[name=option]:checked').val();
And retrieve the value of radio button as
document.formName.radioboxName.value;
Since you are giving same name for the radio buttons, only one value can be selected.
Katherine if you want to select a single item from both the groups then you should go for the radio other wise you can not restrict to select only one check box and unnecessary you have to write a bulk of worth less code for that.
Also you have to mention the array of check boxes. the syntax you have taken is wrong the correct one is
<input name="option[]" type="checkbox" value="1" id="option1">option 1
<input name="option[]" type="checkbox" value="2" id="option2">option 2
and for radios
<input name="option" type="radio" value="1" id="option1">option 1
<input name="option" type="radio" value="2" id="option2">option 2
With Jquery
var checked;
$("input").each(function () {
if ($(this).is(':checked'))
checked[ $(this).attr("name")] = $(this).attr("value")
})
//checked is an array/object with all your checked checkboxs
No jQuery Pure Javascript
const checkedArr = Array.from(
document.querySelectorAll(`input[name=myCheckboxGroup]:checked`)).map(node=>node.value);
hi
i want to enable the the checkboxes again if user has uncheck the checkboxes which was checked. however in my case case the id and name of the element should to be same. checkboxes are getting disabled on the basis of their values and in the same way i want to enable them back...
<input type="checkbox" value="1" id="preferenceid" name="preferenceid">
<span>MBA</span>
<input type="checkbox" value="2" id="preferenceid" name="preferenceid">
<span>Integrated MBA</span>
<input type="checkbox" value="3" id="preferenceid" name="preferenceid">
<span>MBA/PhD</span>
<input type="checkbox" value="4" id="preferenceid" name="preferenceid">
<span>Diploma</span>
<input type="checkbox" value="5" id="preferenceid" name="preferenceid">
<span>BA(Mass Communication)</span>
<input type="checkbox" value="6" id="preferenceid" name="preferenceid">
<span>BBA</span>
<script type='text/javascript'>
$('#preferenceid[value="1"],#preferenceid[value="2"],#preferenceid[value="3"],#preferenceid[value="4"]').click(function () {
$('#preferenceid[value="5"],#preferenceid[value="6"]').attr("disabled",true);
});
$('#preferenceid[value="5"],#preferenceid[value="6"]').click(function () {
$('#preferenceid[value="1"],#preferenceid[value="2"],#preferenceid[value="3"],#preferenceid[value="4"]').attr("disabled",true);
});
if($('#preferenceid[value="1"],#preferenceid[value="2"],#preferenceid[value="3"],#preferenceid[value="4"]').attr('checked')) {
$('#preferenceid[value="5"],#preferenceid[value="6"]').attr("disabled",true);
}
if($('#preferenceid[value="5"],#preferenceid[value="6"]').attr('checked')) {
$('#preferenceid[value="1"],#preferenceid[value="2"],#preferenceid[value="3"],#preferenceid[value="4"]').attr("disabled",true);
}
</script>
Disable And Enable Input Elements In A Div Block Using jQuery
look here please.
and don't forget to make element id unique