Develop Reference

How does select all checkbox work correctly?

I have to implement a functionality where I have few radio buttons, when I click on a radio button I'll get check boxes, out of which the first check box is "Select all". Rest of the check boxes are few options. When I click on any of these check boxes, a 5-star rating with label as the check box name should come up.
For example (I'm sorry that I can't post a UI picture of this) :
radiobutton1 radiobutton2
when I click on radiobutton1
select_all check box
abc check box
pqr check box
xyz check box
These check boxes will show up.
Now, If I select pqr check box, 5-star rating with a label of "pqr" will come.
pqr
star1 star2 star3 star4 star5
Now, If I select both pqr check box and xyz check box, I'll get their respective ratings :
pqr
star1 star2 star3 star4 star5
xyz
star1 star2 star3 star4 star5
If I select, "Select all" check box, then all the check boxes under it gets checked and ratings for the same will come :
abc
star1 star2 star3 star4 star5
pqr
star1 star2 star3 star4 star5
xyz
star1 star2 star3 star4 star5
I wrote code for rating, radio buttons, check boxes, everything. But I'm getting issue for "select all" checkbox. (My code has lot of other variables and it's sort of big, because this functionality is just a part of a page, so I'm not posting my code here). Also, please note that these options(abc, pqr, xyz) are dynamic and are coming from backend.
<div class="db-checkbox skills_options select_all hidden"><input type="checkbox" id="sa" onClick="toggle(this)"><label for="sa">Select all skills</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="abc" name="abc" id="a"><label for="a">abc</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="pqr" name="pqr" id="p"><label for="p">pqr</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="xyz" name="xyz" id="x"><label for="x">xyz</label></div>
This is the code for the check boxes and the toggle function in select all check box is as follows :
function toggle(source) {
checkboxes = document.getElementsByClassName('skills_select');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
And I wrote two on click functions, one for the individual options (when I click on abc, pqr, xyz for the respective ratings to show up) and one for the select all options (when I click on select all, ratings of all options to show up). Also, notice here that for each radio button, there are check boxes of it's own.
Now, my issue is that, When I click on select all, all options are getting selected, when I deselect select all, all options are getting unchecked, but, when I select, select all check box, and then I uncheck any option under it, select all check box should also gets unchecked right? Such things are not happening and I can't figure out how I resolve this. Can you please tell me how do I make a select all check box work correctly that works fine in all the scenarios in javascript and jquery (when I select select all, and then uncheck abc, pqr and/or xyz; select all should get unchecked, when I select abc, pqr and xyz individually ratings for abc, pqr, xyz will come and now when I click on select all, again all shouldn't come (it's coming like this for me because i wrote two onclick functions right?); all such cases). Thank you!

"when I select, select all check box, and then I uncheck any option under it, select all check box should also gets unchecked right?"
Is the following what you were trying to do? Incidentally I removed the ID attributes as they were invalid and then moved the input within the label to associate the two.
let checker=document.getElementById('checker');
let col=document.querySelectorAll('input.skills_select');
checker.addEventListener('click',function(e){
col.forEach(n=>n.checked=this.checked);
});
col.forEach( n=>{
n.addEventListener('click',function(e){
if( !this.checked && checker.checked )checker.checked=false;
})
})
<div class='db-checkbox skills_options select_all hidden'>
<label><input type='checkbox' id='checker'>Select all skills</label>
</div>
<div class='db-checkbox skills_options for_rating hidden'>
<label><input class='skills_select' type='checkbox' value='abc' name='abc'>abc</label>
</div>
<div class='db-checkbox skills_options for_rating hidden'>
<label><input class='skills_select' type='checkbox' value='pqr' name='pqr' />pqr</label>
</div>
<div class='db-checkbox skills_options for_rating hidden'>
<label><input class='skills_select' type='checkbox' value='xyz' name='xyz' />xyz</label>
</div>

There are many ways to achieve the effect that you are looking for (Which is the beauty of coding). Abronsius answer is very elegant and simple. Jialis answer uses JQuery and includes a suggestion to handle raitings. I'll provide a thrid different approach.
First we divide the checkboxes into sections. This is simply a wrapper div around a group of checkboxes, where the first checkbox should always be the Select all option. We will also make use of the data attribute to separate what function a checkbox serves (Select all or just a single option).
We will then grab every single checkbox on the page and bind to their change event, handling all checkboxes in the same function. We will use data attribute to seperate them and the section div to group them.
This gives us a very modular approach where you can easily add as many sections, checkboxes and raitings as you'd like.
function showRaitingForCheckbox(checkbox) {
/* For you to implement... */
}
function hideRaitingForCheckbox(checkbox) {
/* For you to imeplement... */
}
/* We grab every single checkbox on this page and loop through them. */
let checkboxes = document.querySelectorAll("input[type=checkbox]")
checkboxes.forEach(function (element) {
/* Bind an event listener for the 'change'. */
element.addEventListener("change", function (e) {
let checkbox = e.target; // Checkbox that has been clicked
let type = checkbox.dataset.id; // It's 'type', all or 'single'
let parentNode = checkbox.parentNode; // Parent node, so that we can reach other checkboxes in this section
let children = parentNode.querySelectorAll("input[type=checkbox]"); // All checkboxes within this section
/* Seperate logic for clicking on 'Select all' and 'Select single option' */
if (type == "all") {
/* We clicked on the 'Select all' checkbox. Go through all checkboxes for this section. */
children.forEach(function (child) {
/* Make sure we're only targeting 'Select single option' checkboxes. */
if (child.dataset.id == "single") {
/* Either check or uncheck the checkbox, also toggle raitings. */
if (checkbox.checked == true) {
child.checked = true;
showRaitingForCheckbox(child)
} else {
child.checked = false;
hideRaitingForCheckbox(child);
}
}
});
} else if (type == "single") {
/* We clicked on a 'Select single option' checkbox, let's toggle raitings first. */
if (checkbox.checked == true)
showRaitingForCheckbox(checkbox);
else
hideRaitingForCheckbox(checkbox);
/* Calculate how many checkboxes have been selected in this section. */
let amountOfCheckedCheckboxes = 0;
for (let i = 0; i < children.length; i++) {
if (children[i].dataset.id == "single" && children[i].checked == true)
amountOfCheckedCheckboxes++;
}
/* If not all checkboxes are selected, unselect the 'Select all' box, otherwise select it. */
if (amountOfCheckedCheckboxes < children.length - 1)
children[0].checked = false;
else
children[0].checked = true;
}
});
});
<div class="section">
<input type="checkbox" data-id="all">Select all</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
</div>
<div class="section">
<input type="checkbox" data-id="all">Select all</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
</div>
<div class="section">
<input type="checkbox" data-id="all">Select all</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
<input type="checkbox" data-id="single">Select single option</input>
</div>
Funny side note: I don't think i've ever written the word checkbox this many times before.

I don't know how you want to add the rating part to DOM
But this code can probably help.
It is better to use the change event for checkboxes
$("#sa").on("change", function(){
if( $(this).is(":checked" ) )
{
$(".skills_select").each(function(){
if(!$(this).is(":checked" ))
{
$(this).prop('checked', true)
$(this).change()
}
})
} else
{
$(".skills_select").each(function(){
if($(this).is(":checked" ))
{
$(this).prop('checked', false)
$(this).change()
}
})
}
})
$(".skills_select").on("change", function(){
// Get parent div
let parent_div = $(this).closest('div');
// It's for example, it's better to use hidden attribute
if( $(this).is(":checked" ) )
$(parent_div).append("<div class='rate'> <br> star1 star2 ... </div>")
else
$(parent_div).find(".rate").remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="db-checkbox skills_options select_all hidden"><input type="checkbox" id="sa" ><label for="sa">Select all skills</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="abc" name="abc" id="a"><label for="a">abc</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="pqr" name="pqr" id="p"><label for="p">pqr</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="xyz" name="xyz" id="x"><label for="x">xyz</label></div>

How to setAttribute for element from radiobutton without submit

I have many buttons. If I click by one of them calls this function:
function addOptions(id)
{
var button = document.getElementById(id); //clicked button
radioDiv = document.querySelector("div.radioDiv");
radioDiv.style.visibility = "visible";
var raz = document.getElementsByName('status'); //get radioButtons
$(".radioDiv").ready(function() {
$('input[type=radio][name=status]').change(function(){
/*Here I'm trying to set attribute to only one button but
here the problem: when I click a few buttons (example: 1st then 2nd, then 3rd)
and on 3rd button I choice the "radioButton" this code is set Attribute for
all of them (3) */
button.setAttribute("status", this.value);
});
});
}
Here index.html. RadioDiv is hidden by default
<div class="layer1">
<div class="radioDiv">
<input type="radio" value="sale" name="status">111
<input type="radio" value="inverted" name="status">222
</div>
</div>
<div class="layer2"></div>
So, I need to set Attribute for button from value of RadioButton.

Use a global variable at the beginning of your js file.
var lastButton;
function addOptions(id) {
$(".radioDiv input[type=radio][name=status]").prop("checked", false);
lastButton = document.getElementById(id); //last clicked button
var status = lastButton.getAttribute("status");
$(".radioDiv input[type=radio][name=status][value='" + status +"']").prop("checked", true);
$(".radioDiv").prop("visible", true);
$('input[type=radio][name=status]').click(function(){
lastButton.setAttribute("status", this.value);
});
}

Where you have the following markup:
<div id="status" class="radioDiv">
<input type="radio" value="sale" name="status">111
<input type="radio" value="inverted" name="status">222
</div>
You can grab both radio buttons as a node list with:
var statusRadioButtons = document.getElementById('status').getElementsByTagName('input');
Then each button is an item in the node list:
statusRadioButtons[0]
statusRadioButtons[1]

Hide and show divs on basis of price and category checkboxes in javascript

I am having a div arrangement in which I am defining data attributes. Like I'm displaying a product list in a div with data attributes, namely data-category and data-price. I want to hide and show divs on basis of selection by checkboxes of category and price. Html structure is as follows:
<div class="content" data-category="shoes" data-price="1000">shoe1</div><br />
<div class="content" data-category="shirts" data-price="1200">shirt1</div><br />
<div class="content" data-category="shoes" data-price="2000">shoe2</div><br />
<div class="content" data-category="shoes" data-price="800">shoe3</div><br />
<div class="content" data-category="shirts" data-price="1300">shirt2</div><br />
<div class="content" data-category="shirts" data-price="800">shirt3</div><br />
<input type="checkbox" class="category" category="shoes" id="shoes">shoes
<input type="checkbox" class="category" category="shirts" id="shirts">shirts
For category, I have kept checkboxes, but for price, I need to use range jquery slider I guess, but I'm unable to use that filter. Basically if you select a category from checkbox lets say shoes, then divs only with shoes should get displayed; and then if you filter the results with price some starting and ending limit it should show shoes category divs falling in that specific range. Not out of range.
For example:- we selected shoes checkbox, it should show shoe divs; then if we select range as 1000-2000, then it should show shoe1 and shoe2 and not shoe3. Please help on this.

Since "category" is not a valid attribute name in html, you should use something else instead. In this case, it would be natural to just use the id directly, as this is the values you need anyway:
<input type="checkbox" class="category" id="shoes">shoes
<input type="checkbox" class="category" id="shirts">shirts
For range, you could have something like this:
<input type="radio" name="range" value="0-9000" checked>All
<input type="radio" name="range" value="0-999">0-1000
<input type="radio" name="range" value="1000-2000">1000-2000
Then in the javascript:
$("input.category").prop("checked", true).change(function (e) {
//Trigger change event on active price range item where the filter is applied
$("input[name=range]:checked").trigger("change");
});
$("input[name=range]").change(function (e) {
var toggle = this.checked;
var range = this.value.split('-');
var rangeFrom = parseInt(range[0]);
var rangeTo = parseInt(range[1]);
// If all category checkboxes are off we will ignore category filter
var allOff = ($("input[type=checkbox]:checked").length === 0);
$(".content[data-price]").each(function(){
var $this = $(this);
// Check if category is active
var active = allOff || $("#" + $this.data("category")).prop("checked");
// Get price as number
var price = parseFloat($this.data('price'));
// Toggle visibility based on category and price range
$this.toggle(price >= rangeFrom && price <= rangeTo && active );
});
});

Javascript display same content on each checkbox clicks?

I have multiple check boxes and i want them to display the same content when each of them is clicked. Now when I click on one check box, the content appears, but until I unclick it the next checkbox won't display any content. I want the all the contents to be displayed as long as check boxes are clicked. any tip with this.
I tried this:
function showTime(days){
var showTime = document.getElementById("time_schedules");
var days = document.getElementById("schedule");
if (days.checked) {
showTime.style.display = "Block";
}
else{
showTime.style.display = "none";
}
}

Insert some class attribute to all your checkboxes so you can select them, then capture the click event, iterate over all checkboxes and perform whatever you need to do (setting label etc).
I recommend using some javascript library such as jquery, for example:
<input type="checkbox" name="cb1" class="cb" />
<label for="cb1" class="cblabel">label1</label>
<input type="checkbox" name="cb2" class="cb" />
<label for="cb2" class="cblabel">label2</label>
$('.cb').bind('click', function() {
$('.cblabel').each(function(i,v) { v.innerHTML = 'hello'; });
});
http://jsfiddle.net/3EMyY/

How to detect which checkboxes are checked?

I need to use checkboxes, but there's no submit button-- it needs to have an effect on the page the user is already on, the same page that contains the checkboxes.
Essentially, I have ~10 checkbox elements. The user selects a certain number of them, then clicks a button element. When they click that element, I need to detect which checkboxes have been checked. What's the best way to do that with the shortest amount of code?

Have all your checkboxes share the same class.
var allChecked = $(".checkBoxClass:checked");
This will return a list of checked checkboxes in the class checkBoxClass. Now you can iterate each element and operate on them.
for(var i=0; i<allChecked.length; i++) {
console.log("Checkbox " + $(allChecked[i]).val().toString() + " is checked");
}

Any of these should work:
$('input:checked');
$('input:checkbox:checked');
$('input:checkbox').filter(':checked');

Try:
<input type="checkbox" id="1" value="one"/>
<input type="checkbox" id="2" value="two"/>
<input type="checkbox" id="3" value="three"/>
<input type="button" onclick="validate()" value="Check"/>
<script type="text/javascript">
function validate(){
var chkArr = document.querySelectorAll('input[type="checkbox"]');
var notChecked='';
for(var i=0;i<chkArr.length;i++){
if(!chkArr[i].checked)
notChecked += chkArr[i].value
}
if(notChecked.length)
alert(notChecked);
}
</script>