We Keep Coding

How to select/unselect multiple CheckBoxes by specific checkbox names on Button Click

What would be an easy way to select multiple checkboxes (not all) with a click of a button?
Any suggestion on how to make this easily?
Thanks,
EraNet
function Select() {
var items = document.getElementsByName('Red')
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox')
items[i].checked = true;
}
}
function UnSelect() {
var items = document.getElementsByName('Red')
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox')
items[i].checked = false;
}
}
<input type="checkbox" name="Red" value="Red">Red<br>
<input type="checkbox" name="Blue" value="Blue">Blue<br>
<input type="checkbox" name="Yellow" value="Yellow">Yellow<br>
<input type="checkbox" name="Orange" value="Orange">Orange<br>
<input type="checkbox" name="Pink" value="Pink">Pink<br>
<input type="checkbox" name="Voilet" value="Voilet">Voilet<br>
<p>
<input type="button" onclick='Select()' value="Select" />
<input type="button" onclick='UnSelect()' value="Unselect" />
</p>

I added a class name for selecting some/all and then using querySelectorAll() to select the elements that need change.
Update
I extended the example with more "select buttons", so that you can see that querySelectorAll() is flexible in the input elements that you would like to update.
function Select(str) {
UnSelect();
// all input elements that has the class name "one"
var items = document.querySelectorAll(str);
items.forEach(item => item.checked = true);
}
function UnSelect() {
// all input elements that has a name
var items = document.querySelectorAll('input[name]');
items.forEach(item => item.checked = false);
}
<input type="checkbox" class="one" name="Red" value="Red">Red<br>
<input type="checkbox" class="one" name="Blue" value="Blue">Blue<br>
<input type="checkbox" class="one three" name="Yellow" value="Yellow">Yellow<br>
<input type="checkbox" class="two three" name="Orange" value="Orange">Orange<br>
<input type="checkbox" class="two" name="Pink" value="Pink">Pink<br>
<input type="checkbox" class="two" name="Voilet" value="Voilet">Voilet<br>
<p>
<input type="button" onclick="Select('input.one')" value="Select by classname 'one'" />
<input type="button" onclick="Select(`input[name = 'Blue']`)" value="Select by name 'Blue'" />
<input type="button" onclick="Select(`input[name = 'Blue'],input[name = 'Pink']`)" value="Select by name 'Blue' and 'Pink'" />
<input type="button" onclick="Select(`input.three`)" value="Select by classname 'three'" />
<input type="button" onclick='UnSelect()' value="Unselect" />
</p>

change radio button checked attribute on basis of label html using jquery

I have a select drop down and if the onchange of select drop-down the option is yes than all the radio buttons should change to yes
<select class="is_poly_cover">
<option>No</option>
<option>Yes</option>
</select>
<input type="radio" name="v1" class=" additional_option_type_7" checked="checked" value="251">
<label class="" for="251">YES</label>
<input type="radio" name="v1" class=" additional_option_type_7" value="254">
<label class="" for="254">NO</label>
<input type="radio" name="v2" class=" additional_option_type_8" checked="checked" value="255">
<label class="" for="255">YES</label>
<input type="radio" name="v2" class=" additional_option_type_8" value="256">
<label class="" for="256">NO</label>
Note: Everthing here is made dynamically and i dont have access to change the html so cannot add classes or id to the elements.
Here on change of is_poly_cover if its yes than all radio button goes to yes and if is_poly_cover no than all radio btns goes to No
attempt:
var set_classes = ['additional_option_type_8','additional_option_type_7'];
$('body').delegate('.is_poly_cover', 'change', function(e) {
var is_poly_cover_text = $(".is_poly_cover").find("option:selected").text().toLowerCase();
if(is_poly_cover_text == 'yes'){
var label = '';
var req_elem = '';
for(var i=1;i<set_classes.length;i++) {
req_elem = "."+set_classes[i];
//console.log(req_elem)
label = $(req_elem).next().html().toLowerCase();
console.log(label)
}
}
});

You can use .each loop to iterate through your labels and see if its value match with select if yes add radio checked above it to true.
Demo Code :
$('body').delegate('.is_poly_cover', 'change', function(e) {
var values = $(this).val().toUpperCase();
console.log(values)
//remove checked from radios
$('[class*=additional_option_type_]').prop("checked", false)
//loop through label (give some class to label then change label.thatclass_name)
$("label").each(function() {
//check value is same
if ($(this).text() == values) {
//add checked to radio
$(this).prev().prop("checked", true)
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="is_poly_cover">
<option>No</option>
<option>Yes</option>
</select>
<input type="radio" name="v1" class="additional_option_type_7" value="251">
<label class="" for="251">YES</label>
<input type="radio" name="v1" class=" additional_option_type_7" value="254">
<label class="" for="254">NO</label>
<input type="radio" name="v2" class=" additional_option_type_8" value="255">
<label class="" for="255">YES</label>
<input type="radio" name="v2" class=" additional_option_type_8" value="256">
<label class="" for="256">NO</label>

setRadioButton();
$('.is_poly_cover').change(function()
{
setRadioButton();
});
function setRadioButton()
{
if($('.is_poly_cover :selected').text() == "Yes")
{
$('body input[type=radio]').each(function(){
var value = $(this).attr('checkedvalue');
if(value == 1)
{
$(this).prop('checked',true);
}
});
}
else
{
$('body input[type=radio]').each(function(){
var value = $(this).attr('checkedvalue');
if(value == 0)
{
$(this).prop('checked',true);
}
});
}
}
<select class="is_poly_cover">
<option>No</option>
<option>Yes</option>
</select>
<input type="radio" name="v1" class=" additional_option_type_7" checkedvalue="1" checked="checked" value="251">
<label class="" for="251">YES</label>
<input type="radio" name="v1" class=" additional_option_type_7" checkedvalue="0" value="254">
<label class="" for="254">NO</label>
<input type="radio" name="v2" class=" additional_option_type_8" checkedvalue="1" checked="checked" value="255">
<label class="" for="255">YES</label>
<input type="radio" name="v2" class=" additional_option_type_8" checkedvalue="0" value="256">
<label class="" for="256">NO</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Create button with Jquery that change the url attribute based on checkbox

I'm trying to add a button for the WhatsApp link, that changes the WhatsApp pre-text with user checkbox.
This what I've got so far:
$('.cb').click(function() {
if($(this).is(":checked")){
var cbVal = $('label[for=' + $(this).attr('id') + ']').text();
var href = $('a').attr('href');
href += cbVal + (',');
$('a').attr('href', href)
}
});
.fieldset {
margin-bottom:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>
So when I checked the checkbox, the URL attribute for the button is added. The problem is, when I uncheck the checkbox, the URL attribute is not removed.
Please help what have I missed?
*also it is very nice when someone can re-write the JS into pure vanilla javascript without jquery :)
Thank you

I rewrited some of the code to open the link only when users click on the link via onlick attribute.
I also recommend that your put the values on checkbox value attribute, because you can control what go in URL and what is visible to user in more simple way.
function openLink() {
let inputs = document.querySelectorAll(".cb:checked");
const link = "https://wa.me/123456?orders=" + Array.from(inputs).map(x => x.value).join();
console.log(link);
// now you can open the window via:
// window.open(link, "_blank");
}
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox" value="burguer">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox" value="juice">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox" value="ice-cream">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>

Another solution is mantain the update link functionality but always recreate the URL when users click on checkbox
function updateLink() {
const selectedInputs = document.querySelectorAll(".cb:checked");
const url = "https://wa.me/123456?orders=" + Array.from(selectedInputs).map(x => x.value).join();
document.getElementById("wp-link").setAttribute("href", url);
console.log(url);
}
window.addEventListener("DOMContentLoaded", _ => {
document.body.querySelectorAll(".cb").forEach(x => {
x.addEventListener("click", updateLink, true)
});
});
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox" value="burguer">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox" value="juice">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox" value="ice-cream">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
<a id="wp-link" href="javascript:void(0)" >Order Now</a>
</button>

You just need to loop on checked input and generate the link everytime user click on checkbox.
$('.cb').click(function() {
var href = "https://wa.me/123456?text=I%20want%20to%20order:%20";
$('.cb').each(function(index, value) {
if ($(this).is(":checked")) {
var cbVal = $('label[for=' + $(this).attr('id') + ']').text();
href += cbVal + (',');
}
});
$('a.whatsappLink').attr('href', href);
console.clear();
console.log(href);
});
.fieldset {
margin-bottom:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>

function removeItem(arr, target) {
const aux = arr.slice()
aux.some((item, idx) => {
if (item === target) {
const a = arr.splice(idx, 1)
return true
}
return false
})
return arr
}
$('.cb').click(function() {
var href = $('a').attr('href');
var url = href.split(',')
var cbVal = $('label[for=' + $(this).attr('id') + ']').text();
if($(this).is(":checked")){
url.push(cbVal);
} else {
url = removeItem(url, cbVal)
}
$('a').attr('href', url.join())
$('#result').text($('a').attr('href'))
});
$('#result').text($('a').attr('href'))
.fieldset {
margin-bottom:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="fieldset">
<legend>Select Menu Item</legend>
<input id="checkbox12" class="cb" type="checkbox">
<label for="checkbox12">Burger</label><br/>
<input id="checkbox22" class="cb" type="checkbox">
<label for="checkbox22">Juice</label><br/>
<input id="checkbox32" class="cb" type="checkbox">
<label for="checkbox32">Ice Cream</label><br/>
</fieldset>
<button>
Order Now
</button>
<div id="result"></div>

Add values from checkbox labels

I have 4 checkboxes with labels and a total label in my webpage. The labels are the price e.g. $12, $100. When the user checks a box I want to take the value from the label and put it in the total label. Then if the user deselect the box, then subtract that value from the total label.
I have tried to set a function called checkbox2() where I took the value and stripped the '$' then turned the remaining string into a number. Then checked if the box was checked, if so, then add number. then convert back to string and set the innerHTML. Did not work and I am sure not the way to do this.
How should I go about this?
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2()"/> $125
</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2()"/> $100
</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2()" /> $75
</label>
</div>
<div class ="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2()" /> $50
</label>
</div>
<div class ="pwrap">
<p class="cat1"><b><u>Total</u></b></p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>
JS:
var k = document.getElementById("totallbl").innerHTML;
if (document.getElementById("check1").checked) {
x = "150";
} else {
x = "0";
var res = k + x;
document.getElementById("totallbl").innerHTML = res;
}

your html was also not correct. Try this
function checkBox2(checkbox) {
if (checkbox.checked) {
var value = checkbox.parentNode.textContent.match(/\s*\d+(?:\.\d{2})?/)[0];
var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\s*\d+(?:\.\d{2})?/)[0];
var newTotalValue = parseFloat(value) + parseFloat(totalValue);
document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue;
document.getElementById('agreedLBL').innerText = newTotalValue;
} else {
var value = checkbox.parentNode.textContent.match(/\s*\d+(?:\.\d{2})?/)[0];
var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\s*\d+(?:\.\d{2})?/)[0];
var newTotalValue = parseFloat(totalValue) - parseFloat(value);
document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue;
document.getElementById('agreedLBL').innerText = newTotalValue;
}
}
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" /> $125</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" /> $100</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" /> $75</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" /> $50</label>
</div>
<div class="pwrap">
<p class="cat1"><b><u>Total</u></b></p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>

Basically, you should be setting html in a way so that it's easy to access values associated with checkboxes. Please note data-value="0" on totallbl and value assigned for each input checkbox.
function checkBox2(obj) {
var k = parseInt(document.getElementById("totallbl").dataset.value);
if (obj.checked) {
k += parseInt(obj.value);
} else {
k -= parseInt(obj.value);
}
document.getElementById("agreedLBL").innerHTML = k;
document.getElementById("totallbl").dataset.value = k;
document.getElementById("totallbl").innerHTML = '$' + k;
}
<div class="cbwrap"><label for="check1" name="label2" id="label2"><input type="checkbox" class="cb" id="check1" onclick="checkBox2(this);" value="150" /> $150</label></div>
<div class="cbwrap"><label for="check2" name="label2" id="label2"><input type="checkbox" class="cb" id="check2" onclick="checkBox2(this);" value="125" /> $125</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" id="check3" onclick="checkBox2(this);" value="100" /> $100</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="75" /> $75</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="50" /> $50</label></div>
<div class="pwrap"><p class="cat1"><b><u>Total</u></b></p></div>
<div class="cbwrap"><label for="total" name="totallbl" id="totallbl" data-value="0" style="font-weight:bold;text-decoration:underline">$0</label></div>
<div> <label for="total" name="agreedLBL" id="agreedLBL">0</label></div>

HEllo Dear it complete running example and please add jquery cdn in head tag.
if you not getting exact output then tell me..
<body>
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" />
$125</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" />
$100</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" />
$75</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" />
$50</label>
</div>
<div class="pwrap">
<p class="cat1">
<b><u>Total</u></b>
</p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>
<script>
function checkBox2(tempCheckBOx) {
var tempLenght = $(".cbwrap label input[type='checkbox']").length;
var tempTotal = 0;
for (var i = 0; i < tempLenght; i++) {
if ($(".cbwrap label input[type='checkbox']").eq(i).prop('checked') == true) {
var tempStore = $(".cbwrap label").eq(i).text();
var tempVal = parseInt(tempStore.trim().substr(1, (tempStore.length + 1)));
tempTotal += tempVal;
}
}
$("#agreedLBL").text("$"+tempTotal);
}
</script>
</body>

$(document).ready(function(){
$('.cb').click(function(){
var totalvaluestored = document.getElementById('totallbl').innerText.replace(/\$/g, '');
var value = this.value;
if(totalvaluestored === "0"){
document.getElementById('totallbl').innerHTML = '$'+value;
this.value = "";
}
else if(totalvaluestored !== "0" && value !== "")
{
value = parseInt(totalvaluestored) + parseInt(value);
document.getElementById('totallbl').innerHTML = '$ '+value;
this.value = "";
}
else{
var value = this.closest('label').innerText;
value = value.replace(/\$/g, '');
this.value = value;
value = parseInt(totalvaluestored) - parseInt(value);
document.getElementById('totallbl').innerHTML = '$ '+value;
}
});
});

How can I make this javascript form validation DRYer?

The user has to select one radio from each of three input "categories". If he "submits" without doing so, he gets a warning:
http://jsfiddle.net/bqyvS/
Markup like this:
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
if (!$('#color input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a color!");
}
else if(!$('#shape input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a shape!");
}
else if(!$('#size input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a size!");
}
});
This is a simplified version of a larger piece of code. How can I rewrite the conditional more efficiently so that I'm not verbosely checking each input name? (There should only be one "warning" displayed per "submit", even if multiple input name categories aren't checked.) Editing the markup would be okay.
Thanks!

When applying behavior to similar groups, you should start thinking about classes instead of ids, in this solution, you don't need a separate data-name but I believe it's better to have data separate from html id, but you could use this.id if you prefer
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});

function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}

$('#link').on('click', function(){
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
$('#warning').text("Oops! Please choose a " + this.id + "!");
});
});
jsFiddle
You may want to consider generating a warning message in the case a user does not select any inputs or only 1 input.
In this example, a user will recieve a message similar to Oops! Please choose a color, and shape!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
jsFiddle