We Keep Coding

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

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>

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

multiple checkboxes at least 1 required in html 5

I want as HTML error message rather than an alert message, I've found few solutions but none are not working as hoped
$('form').on('click', '.required_group', function() {
$('input.required_group').prop('required', $('input.required_group:checked').length === 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="whatever" value="1" required class="required_group" />
<input type="checkbox" name="whatever" value="2" required class="required_group" />
<input type="checkbox" name="whatever" value="3" required class="required_group" />
<input type="checkbox" name="whatever" value="4" required class="required_group" />
<input type="submit" name="submit" />
</form>

$('form').on('click', '.required_group', function() {
var flag=false;
$('.required_group').each(function(e){
if (this.checked) {
flag=true;
}
});
if(!flag){
// Do your code for Error Message
}
});

Here is a method with a custom error message.
It looks at everything with the class required_group and counts every instance where it is checked. If the number is 0 it sets a custom message and triggers it, however, if there is one or more it will reset the message and trigger a submit.
function validateGrp() {
let things = document.querySelectorAll('.required_group')
let checked = 0;
for (let thing of things) {
thing.checked && checked++
}
if (checked) {
things[things.length - 1].setCustomValidity("");
document.getElementById('checkGroup').submit();
} else {
things[things.length - 1].setCustomValidity("You must check at least one checkbox");
things[things.length - 1].reportValidity();
}
}
document.querySelector('[name=submit]').addEventListener('click', () => {
validateGrp()
});
<form id="checkGroup">
<input type="checkbox" name="whatever" value="1" class="required_group" />
<input type="checkbox" name="whatever" value="2" class="required_group" />
<input type="checkbox" name="whatever" value="3" class="required_group" />
<input type="checkbox" name="whatever" value="4" class="required_group" />
<button name="submit">Submit</button>
</form>

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');

With JQuery how can you make an array of inputs from checkboxes into one variable?

I would like to make the data from this jquery submit go into one variable that I can put into html. I am using the append button to add html to my form, but can't figure out how to make the data variable into an array of each check box value .
https://jsfiddle.net/soljohnston777/k5yc1y2a/2/
JQuery:
$(".checkboxadd").click(function(){
$('[id^="add_policies_checkbox"]').each(function(i, v){
//alert(this.value);
if($(v).prop('checked')){
var data=$(v).val();
$("#div_to_add_this_checkbox_value").append("<input type=hidden name='pnpID_instructions' value=\'"+data+"\' />P&P #'s: "+data+"");}
});
});//end ajaxifypolicies
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="add_policies_checkbox1"/>
<input type="checkbox" value="2" id="add_policies_checkbox2"/>
<input type="checkbox" value="3" id="add_policies_checkbox3"/>
<button class="checkboxadd">Submit</button>
<div id="div_to_add_this_checkbox_value"></div>
<div> Check mark all 3 then hit submit, What I want is the output like an array:<br>P&P #'s:1,2,3 <br> (and the hidden value="1,2,3")
</div>

To convert an array to a string you can use array.join(',').
$(".checkboxadd").click(function() {
var data = [];
$('[id^="add_policies_checkbox"]').each(function(i, v) {
if ($(v).prop('checked')) {
data.push($(v).val());
}
});
console.log(data);
$("#div_to_add_this_checkbox_value").html('P&P #s:' + data.join(',') + "<input type='hidden' name='pnpID_instructions' value='"+data.join(',')+"' />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="add_policies_checkbox1" />
<input type="checkbox" value="2" id="add_policies_checkbox2" />
<input type="checkbox" value="3" id="add_policies_checkbox3" />
<button class="checkboxadd">Submit</button>
<div id="div_to_add_this_checkbox_value"></div>