Select 'child' based on 'parent' id with jquery - javascript

I have checkboxes, each with a unique id. When a 'parent' is checked, the 'child' checkboxes should also be checked. The problem is that 'parent' checkboxes are associated with children based on the ID, not the element hierarchy since they are all at same level:
<div id="checkinline">
<input type="checkbox" id="CC__100"></input> <- 'parent'
<input type="checkbox" id="CC__10010"></input>
<input type="checkbox" id="CC__10020"></input>
<input type="checkbox" id="CC__10030"></input>
<input type="checkbox" id="CC__10040"></input>
</div>
When CC__100 is checked, I need all checkboxes with ids prefixed by CC__100 to also be checked.
My attempt so far:
$("div#" + id + " :input").each(function () {
var input = $(this);
var element_id = input.prop('id');
var element_type = input.prop('type');
if (element_type === 'checkbox') {
if (element_id == i miss this) {
$(this).prop('checked', true)
}
}
})

You can try this using attribute starts with selector [id^="value"]:
$('.chk :checkbox').on('change', (e) => {
$(e.target).nextAll('[id^="'+ e.target.id +'"]').prop('checked', e.target.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chk">
<input type="checkbox" id="CC__100" />
<input type="checkbox" id="CC__10010" />
<input type="checkbox" id="CC__10020" />
<input type="checkbox" id="CC__10030" />
<input type="checkbox" id="CC__10040" /><br/>
<input type="checkbox" id="CC__200" />
<input type="checkbox" id="CC__20010" />
<input type="checkbox" id="CC__20020" />
<input type="checkbox" id="CC__20030" />
<input type="checkbox" id="CC__20040" />
</div>

You are thinking way to complicated, you should check if the "parent" 'changes'. When it's check state is checked then check all the elements with an id that starts with 'CC__100'.
That's the "[id^='CC__100']" part (selectors).
$("#CC__100").change(function () {
if (this.checked) {
$("[id^='CC__100']").prop("checked", true);
}
});
Codepen

You can use the starts with ([attr^=value]) attribute selector to find elements with an id that starts with the id of the checkbox that was just checked.
$('input[type=checkbox]').click(e => {
const { target } = e;
// Children have an ID that start with the id of the select checbox, but don't have the exact id
const children = $( `input[type=checkbox][id^=${target.id}][id!=${target.id}]` );
// Set children to the value of the parent:
children.prop( 'checked', $(target).prop('checked') );
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkinline">
<input type="checkbox" id="CC__100"><label for="CC__100">Parent 100</label><br>
<input type="checkbox" id="CC__10010"><label for="CC__10010">Child 10010</label><br>
<input type="checkbox" id="CC__10020"><label for="CC__10020">Child 10020</label><br>
<input type="checkbox" id="CC__10030"><label for="CC__10030">Child 10030</label><br>
<input type="checkbox" id="CC__10040"><label for="CC__10040">Child 10040</label><br>
<br>
<input type="checkbox" id="CC__200"><label for="CC__200">Parent 200</label><br>
<input type="checkbox" id="CC__20010"><label for="CC__20010">Child 20010</label><br>
<input type="checkbox" id="CC__20020"><label for="CC__20020">Child 20020</label><br>
<input type="checkbox" id="CC__20030"><label for="CC__20030">Child 20030</label><br>
<input type="checkbox" id="CC__20040"><label for="CC__20040">Child 20040</label><br>
</div>

Related

Jquery get all checked checkboxes values

I want to select all value checked. My checkbox name are type[]
When I remove the [] it is working . Please see my code below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<input type="checkbox" name="type[]" value="GFG" id="feaut" /> GFG:
<input type="checkbox" name="type[]" value="Geeks" id="feaut" /> Geeks:
<input type="checkbox" name="type[]" value="Geek" id="feaut"/> Geek:
<input type="checkbox" name="type[]" value="portal" id="feaut" /> portal:
<br>
<button>
click here
</button>
<script>
$('button').on('click', function() {
var array = [];
$("input:checkbox[name=type]:checked").each(function() {
array.push($(this).val());
});
console.log(array.toString());
});
</script>
Use [type=checkbox] to select inputs of type checkbox. Also, since [] are illegal characters in unquoted selector values, surround them in quotes: [name='type[]']
$('button').on('click', function() {
var array = [];
$("input[type=checkbox][name='type[]']:checked").each(function() {
array.push($(this).val());
});
console.log(array.toString());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<input type="checkbox" name="type[]" value="GFG" id="feaut" /> GFG:
<input type="checkbox" name="type[]" value="Geeks" id="feaut" /> Geeks:
<input type="checkbox" name="type[]" value="Geek" id="feaut" /> Geek:
<input type="checkbox" name="type[]" value="portal" id="feaut" /> portal:
<br>
<button>
click here
</button>

How to check all checkbox when check on one checkbox and click on a button and get the values?

for single id i did like this but how to get all id on click of button when check the universal checkbox for all the columns
My Html File:-
<td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
<input type="button" value="Transfer" (click)="getclickedevent($event)">
My Javascript file:-
getclickedevent(event) {
let id = $("input:checkbox[name=option]:checked").val();
console.log("The Required checkbox checked is "+ id)
}
make all the id's children of one master id
then use this
var div = // getElementById, etc
var children = div.childNodes;
var elements = [];
for (var i=0; i<div.childNodes.length; i++) {
var child = div.childNodes[i];
if (child.nodeType == 1) {
elements.push(child)
}
}
I hope you don't mind but I took the approach of refactoring your code.
Here is the HTML:
<td>
<input type="checkbox" name="option" value="{{item.customerid}}" required >
</td>
<input type="button" value="Transfer">
<div id='options'>
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
</div>
And here is the jQuery. I used jQuery because you missed native javascript and jQuery in your code:
$('input[type="button"][value="Transfer"]').click( function() {
let id = $("input:checkbox[name=option]").is(':checked');
$('input[name="options"]').each(function() {
this.checked = id;
});
});
You can see it all working here.
You can get all checked checkboxes values inside button click event handler using jquery .map() method like:
var ids = $("input:checkbox[name=option]:checked").map(function(){
return $(this).val();
}).get();
console.log(ids) //==> ['xxx', 'xxx', 'xxx', ...]
This will give a basic array containing all checked checkboxes values.
DEMO:
$("#checkAll").click(function() {
$("input:checkbox[name=option]").prop('checked', this.checked);
var ids = $("input:checkbox[name=option]:checked").map(function() {
return $(this).val();
}).get();
console.log(ids)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" name="option" value="1">Item 1
<input type="checkbox" name="option" value="2">Item 2
<input type="checkbox" name="option" value="3">Item3
This should work for you. ↓↓
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<input type="checkbox" onclick="$('input[name*=\'customer_store\']').prop('checked', this.checked);"/> Select / Deselect<br>
<input type="checkbox" name="customer_store[]" value="xyz"/>xyz<br>
<input type="checkbox" name="customer_store[]" value="abc"/>abc<br>
Add ID to your button inputs and call on them as selectors for .click().
Add a function to get the click on the select all button and set all inputs to checked used an added class of option for to select the input elements that are check boxes.
Define an empty array to hold your values. Run your checked values through .each() loop and assign them to the array.
Those values will now live in the options array.
$(document).ready(function() {
$('#selectall').click(function(){
$('.option').prop("checked", true);
});
$('#transfer').click(function() {
var options = [];
$.each($("input[type='checkbox']:checked"), function() {
options .push($(this).val());
});
console.log(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input type="button" id="transfer" value="Transfer">
<input type="button" id="selectall" value="Select All">

How to get multiple checkboxes values using id

I have a list of check boxes with different values.
<input type="checkbox" value="55" id="myId">
<input type="checkbox" value="65" id="myId">
<input type="checkbox" value="75" id="myId">
<input type="checkbox" value="85" id="myId">
<input type="checkbox" value="95" id="myId">
When I'm getting those values using js that will take only value=55 only. It is due to the same id="myId"
var x = "";
$("input[type='checkbox']").change(fucntion(){
if(this.checked){
x = x+","+x;
}
});
When run that will load only 55 values like-: 55,55,55,55
Attribute id should be unique. You can use an array instead of string variable. Then simply add or remove item based on the check box status:
var x = [];
$("input[type='checkbox']").change(function(){
if(this.checked){
x.push(this.value);
}
else {
var index = x.indexOf(this.value);
x.splice(index, 1);
}
console.log(x.join(','));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" id="">55
<input type="checkbox" value="65" id="">65
<input type="checkbox" value="75" id="">75
<input type="checkbox" value="85" id="">85
<input type="checkbox" value="95" id="">95
First of all don't use multiple same ids on your page, id should be unique on entire page, try data attributes instead
$("input[type='checkbox']").change(function(){
var x = "";
$("[data-id=myId]").each(function(){
if(this.checked){
x = x + $(this).val() + ",";
}
});
console.log(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" data-id="myId">
<input type="checkbox" value="65" data-id="myId">
<input type="checkbox" value="75" data-id="myId">
<input type="checkbox" value="85" data-id="myId">
<input type="checkbox" value="95" data-id="myId">
If selection order isn't important can map() the checked values to new array every change
Your string concatenation approach doesn't take into account unchecking a previously checked input
$(':checkbox').change(function(){
var vals = $(':checkbox:checked').map(function(){
return this.value
}).get()
console.log(vals.join())
})
// insert values as text for demo
.wrap(function(){
return $('<label>',{text:this.value})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="55" >
<input type="checkbox" value="65" >
<input type="checkbox" value="75">
<input type="checkbox" value="85" >
<input type="checkbox" value="95" >
Note that ID's must be unique in a page

How to add the checked input box in input text whether onload or onclick using jquery

Im getting the result now, but what I want is to Also get the checked input box and put into the input text not just only using on change event in jQuery but also on page loads. As you can see, one of the checkboxes below has been checked but not putting into the input text. Please see my code below:
$(document).ready(function(){
$checks = $(":checkbox");
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(",");
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
</div>
<div class="multiple">
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3">3
</div>
You can do this easily like:
$(document).ready(function() {
$checks = $(":checkbox");
$checks.on('change', setResults);
function setResults() {
var string = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
$('#field_results').val(string);
}
setResults();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results" /><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2" checked>2<br>
<input type="checkbox" value="3" checked>3
You should set values into input at first, try this:
$(document).ready(function() {
$checks = $(":checkbox");
$('#field_results').val(getCheckedValues());
$checks.on('change', function(){
$('#field_results').val(getCheckedValues());
});
});
function getCheckedValues(){
$checks = $(":checkbox");
var valuse = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(",");
return valuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1" checked>1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3" checked>3<br>
<input type="checkbox" value="4">4<br>
<input type="checkbox" value="5" checked>5<br>
The easiest way to do it You can use .trigger() to set default value
$checks.trigger('change');

Click on checkbox label not working

I have a checkbox inside a P with class vertical options. I have written script to implement checkbox functionality even on clicking the P. The code is:
$(".vertical-options,.horizontal-options").click(function(event){
var input = $(this).find('input').first();
console.log(input);
if((event.target.type !== 'checkbox') && (input.attr('type') === 'checkbox')) {
if(input.is(':checked')){
input.prop('checked', false);
} else {
input.prop('checked', true);
}
}
});
but with this logic clicking on the checkbox label does not work. What am I doing wrong?
You need to use label tag for this purpose. Write id of target checkbox in for attribute of label tag.
<label for="id1">Checkbox-1</label>
<input type="checkbox" id="id1" />
<label for="id2">Checkbox-2</label>
<input type="checkbox" id="id2" />
<label for="id3">Checkbox-3</label>
<input type="checkbox" id="id3" />
If you want to do this work using jquery for other tag, see example
$("p").on("click", function(e){
var checkbox = $(this).find(':checkbox');
if ($(this).is(e.target))
checkbox.prop('checked', !checkbox.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Checkbox-1
<input type="checkbox" />
</p>
<p>
Checkbox-2
<input type="checkbox" />
</p>
<p>
Checkbox-3
<input type="checkbox" />
</p>

Categories