JavaScript Show/Hide DIV [duplicate] - javascript

This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 3 years ago.
I have a form where the user choose if he/she is SINGLE CITIZENSHIP OR DUAL CITIZENSHIP.
If the user chooses SINGLE CITIZENSHIP the hidden div will not show up and if the user chooses DUAL CITIZENSHIP the hidden div will show below.
<div class="form-row">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Dual Citizenship</label>
</div>
</div>
<div id="hidden">
<div class="form-row">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">By Naturalize</label>
</div>
</div>
</div>

let valeInpOne = document.getElementById('inlineCheckbox1');
let valeInpTwo = document.getElementById('inlineCheckbox2').value;
let ele = document.getElementById("hidden");
if(valeInpOne == 'option1'){ ele.hidden = true }else if(valeInpTwo == 'option2'){ ele.hidden = false }

Use change() event of jQuery and show-hide div.
$(document).ready(function () {
$('#inlineCheckbox2').change(function () {
if (!this.checked)
$('#hidden').fadeOut('slow');
else
$('#hidden').fadeIn('slow');
});
});
#hidden{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>Dual Citizenship</label
>
</div>
</div>
<div id="hidden">
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>By Naturalize</label
>
</div>
</div>
</div>
Refer: https://stackoverflow.com/a/19447642/10971575

Related

how to get the vale of Multiple check box in javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to get the value of the check box to display on we page
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" value="JAVA">
<label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox2" value="HTML">
<label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox3" value="CSS" >
<label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>
<html>
<body>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" name="checkbox" value="JAVA">
<label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox2" name="checkbox" value="HTML">
<label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox3" name="checkbox" value="CSS" >
<label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>
<button id="btn">Submit</button> <br>
<script>
document.getElementById('btn').onclick = function() {
var checkbox;
for (checkbox of document.getElementsByName('checkbox')) {
if (checkbox.checked)
document.body.append(checkbox.value + ' ');
}
}
</script>
</body>
</html>

Jquery - Disable Checkboxes when a checkbox is Pre-Selected

In a Laravel Project, the Create Blade View contains some checkboxes. I have easily achieved the feature that, If the first checkbox is selected, the other checkbox will be disabled.
Create Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0" >
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10" >
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20">
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30">
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
jquery
$("#inlineCheckbox1").click(function() {
$(":checkbox").not(this).prop("disabled", this.checked);
});
But the problem occurs in the Edit Blade View.
Edit Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0"
{{in_array("0",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10"
{{in_array("10",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20"
{{in_array("20",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30"
{{in_array("30",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
In the edit view, the other checkboxes are not disabled though #inlineCheckbox1 was pre-selected. So, the other checkboxes seem clickable.
I want to achieve: the other checkboxes will always be disabled if #inlineCheckbox1 is checked.
try following js in your edit view
$(function(){
if($('#inlineCheckbox1').is(":checked"))
$(":checkbox").not($('#inlineCheckbox1')).prop("disabled", true);
})

Using GetElementsByClassName to check checkbox values and if the checkbox is checked programmatically

The task is to write to a string whether a checkbox has been checked out of a series of 27 checkboxes with the same class name of "GEMS_0".
When I access elements through console it works.
document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value
returns "moved"
document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value
returns false.
When I do it programmatically, by calling getGEMSValue(0), it works for the first element and then returns null for the value of the second element when it should be "filled with wonder". I tried changing to "filled-with-wonder" but that didn't change anything.
Here is the code for accessing the elements programmatically:
function getGEMSValue(num) {
let return_string = "";
let checkboxes = document.getElementsByClassName("GEMS_" + num.toString());
console.log(checkboxes);
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i].id);
console.log(document.getElementById(checkboxes[i].id));
let value = document.getElementById(checkboxes[i].id).value
if (document.getElementById(checkboxes[i].id).checked) {
return_string += value + ";";
} else {
return_string += "false;";
}
}
//remove semicolon at end
return_string = return_string.slice(0,-1);
return return_string;
}
This is the HTML being accessed.
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
<label class="form-check-label" for="inlineCheckbox1">moved</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
<label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
<label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
<label class="form-check-label" for="inlineCheckbox4">fascinated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
<label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
<label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
<label class="form-check-label" for="inlineCheckbox7">serene</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
<label class="form-check-label" for="inlineCheckbox8">calm</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
<label class="form-check-label" for="inlineCheckbox9">soothed</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
<label class="form-check-label" for="inlineCheckbox10">tender</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
<label class="form-check-label" for="inlineCheckbox11">affectionate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
<label class="form-check-label" for="inlineCheckbox12">mellow</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
<label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
<label class="form-check-label" for="inlineCheckbox14">sentimental</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
<label class="form-check-label" for="inlineCheckbox15">dreamy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
<label class="form-check-label" for="inlineCheckbox16">strong</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
<label class="form-check-label" for="inlineCheckbox17">energetic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
<label class="form-check-label" for="inlineCheckbox18">triumphant</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
<label class="form-check-label" for="inlineCheckbox19">animated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
<label class="form-check-label" for="inlineCheckbox20">bouncy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
<label class="form-check-label" for="inlineCheckbox21">joyful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
<label class="form-check-label" for="inlineCheckbox22">sad</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
<label class="form-check-label" for="inlineCheckbox23">tearful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
<label class="form-check-label" for="inlineCheckbox24">blue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
<label class="form-check-label" for="inlineCheckbox25">tense</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
<label class="form-check-label" for="inlineCheckbox26">agitated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
<label class="form-check-label" for="inlineCheckbox27">nervous</label>
</div>
<br />
</div>
As said in comments, document.getElementById( element.id ) is an anti-pattern and should really just be element since id should be unique in document.
But for your task, intead of iterating over all the checkboxes, then checking all their checked status to compose your string, you can get the same result much faster using a simple :checked selector:
document.getElementById('checker').onclick = (evt) => {
// select only the checked inputs with class GEMS_0
const checked_gems = document.querySelectorAll('.GEMS_0:checked');
// compose your string of values
const result = [...checked_gems].map( elem => elem.value ).join(';');
console.log( result );
}
body { margin-bottom: 150px; }
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
<label class="form-check-label" for="inlineCheckbox1">moved</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
<label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
<label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
<label class="form-check-label" for="inlineCheckbox4">fascinated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
<label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
<label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
<label class="form-check-label" for="inlineCheckbox7">serene</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
<label class="form-check-label" for="inlineCheckbox8">calm</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
<label class="form-check-label" for="inlineCheckbox9">soothed</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
<label class="form-check-label" for="inlineCheckbox10">tender</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
<label class="form-check-label" for="inlineCheckbox11">affectionate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
<label class="form-check-label" for="inlineCheckbox12">mellow</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
<label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
<label class="form-check-label" for="inlineCheckbox14">sentimental</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
<label class="form-check-label" for="inlineCheckbox15">dreamy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
<label class="form-check-label" for="inlineCheckbox16">strong</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
<label class="form-check-label" for="inlineCheckbox17">energetic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
<label class="form-check-label" for="inlineCheckbox18">triumphant</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
<label class="form-check-label" for="inlineCheckbox19">animated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
<label class="form-check-label" for="inlineCheckbox20">bouncy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
<label class="form-check-label" for="inlineCheckbox21">joyful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
<label class="form-check-label" for="inlineCheckbox22">sad</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
<label class="form-check-label" for="inlineCheckbox23">tearful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
<label class="form-check-label" for="inlineCheckbox24">blue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
<label class="form-check-label" for="inlineCheckbox25">tense</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
<label class="form-check-label" for="inlineCheckbox26">agitated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
<label class="form-check-label" for="inlineCheckbox27">nervous</label>
</div>
<br />
</div>
<button id="checker">check selection</button>
simply use this code
function getGEMSValue(num) {
let inElm = document.getElementById('inlineCheckbox'+num);
//...
console.log( inElm.id, inElm.checked, inElm.value );
};
As the question mentioned document.getElementsByClassName.
Just slight changing to JS of answer by #Kaiido
const checkedVals = () => {
let result = [];
Array.from(document.getElementsByClassName("GEMS_0")).forEach(elem => elem.checked ? result.push(elem.value) : '');
console.log(result, result.join(';'));
// OR
let result1 = Array.from(document.getElementsByClassName("GEMS_0")).map(elem => elem.checked ? elem.value : null).filter(x => !!x);
console.log(result1, result1.join(';'));
};
document.getElementById('checker').onclick = checkedVals;
body {
margin-bottom: 150px;
}
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
<label class="form-check-label" for="inlineCheckbox1">moved</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
<label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
<label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
<label class="form-check-label" for="inlineCheckbox4">fascinated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
<label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
<label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
<label class="form-check-label" for="inlineCheckbox7">serene</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
<label class="form-check-label" for="inlineCheckbox8">calm</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
<label class="form-check-label" for="inlineCheckbox9">soothed</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
<label class="form-check-label" for="inlineCheckbox10">tender</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
<label class="form-check-label" for="inlineCheckbox11">affectionate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
<label class="form-check-label" for="inlineCheckbox12">mellow</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
<label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
<label class="form-check-label" for="inlineCheckbox14">sentimental</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
<label class="form-check-label" for="inlineCheckbox15">dreamy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
<label class="form-check-label" for="inlineCheckbox16">strong</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
<label class="form-check-label" for="inlineCheckbox17">energetic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
<label class="form-check-label" for="inlineCheckbox18">triumphant</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
<label class="form-check-label" for="inlineCheckbox19">animated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
<label class="form-check-label" for="inlineCheckbox20">bouncy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
<label class="form-check-label" for="inlineCheckbox21">joyful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
<label class="form-check-label" for="inlineCheckbox22">sad</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
<label class="form-check-label" for="inlineCheckbox23">tearful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
<label class="form-check-label" for="inlineCheckbox24">blue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
<label class="form-check-label" for="inlineCheckbox25">tense</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
<label class="form-check-label" for="inlineCheckbox26">agitated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
<label class="form-check-label" for="inlineCheckbox27">nervous</label>
</div>
<br />
</div>
<button id="checker">check selection</button>

Need to pull values from multiple check boxes into an array and store it as a variable

I have a modal that I am using for a coding boot camp assignment -
I have 7 days of the week listed as well as weekend/weekday options.
I thought I could use the Jquery .each and CSS :checked to pull the values that I had assigned to each of these inputs but I seem to be doing something wrong as every time I try to console log the array I am pushing to - it returns an empty array.
This is my first post on StackOverflow and I am extremely new to coding, please be gentle :)
Apologies in advance for syntax and formatting. Like I said I am super new and have only been coding for about 1.5 months.
I tried giving all the checkboxes different ID's and pulling the values one by one into an array, I also tried giving them all the same name so I could use the CSS checked feature to pull them all at once using .each and this. Neither seemed to work
//below is the check box portion of the modal//
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
<label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
<label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
<label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
<label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
<label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
<label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
<label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
<label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
<label for="Weekend">Weekend</label>
</div>
// here is where I try to call the values of which boxes are checked back//
$("#submitButton").on("click", function () {
event.preventDefault();
var daysOfWeek1 = [];
$.each($("input[name='dayOfWeek']:checked"), function(){
daysOfWeek1.push($(this).val());
});
console.log(daysOfWeek1)
});
I would like to get an array back containing the values (set of strings) that I entered for each check box options and be able to store it in a variable and console.log it as well.
Right now I am only getting an empty array
It's even simpler - just use map, then convert it to an array (to remove excess properties) using spread syntax:
$("#submitButton").on("click", function() {
event.preventDefault();
var daysOfWeek1 = [...$("input[name='daysOfWeek']:checked").map((i, el) => $(el).val())];
console.log(daysOfWeek1)
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
<label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
<label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
<label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
<label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
<label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
<label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
<label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
<label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
<label for="Weekend">Weekend</label>
<button id="submitButton">Submit</button>
</div>
ooops. It totally works - I just used dayOfWeek below and daysOfWeek above...
.>
Sorry to bother you

How do i reuse a function several times on one page?

I would like to stop a function so it can run multiple times on one page. It is some radio buttons which i would like to be cleared if a checkbox is clicked. It should work with an infinite number of products. I'm the worst on javascript so i hope i could get an answer?
Sample:
$('.product .question-input').change(function() {
if ($(this).is(':checked')) { //radio is now checked
$('.product .question-checkbox').prop('checked', false);
}
return false;
});
$('.product .question-checkbox').change(function() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Adobe</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">1
<input class="form-check-input question-input" type="radio" name="test-1" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">2
<input class="form-check-input question-input" type="radio" name="test-1" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">3
<input class="form-check-input question-input" type="radio" name="test-1" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">4
<input class="form-check-input question-input" type="radio" name="test-1" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">5
<input class="form-check-input question-input" type="radio" name="test-1" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Mocups</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">1
<input class="form-check-input question-input" type="radio" name="test-2" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">2
<input class="form-check-input question-input" type="radio" name="test-2" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">3
<input class="form-check-input question-input" type="radio" name="test-2" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">4
<input class="form-check-input question-input" type="radio" name="test-2" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">5
<input class="form-check-input question-input" type="radio" name="test-2" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
By passing a reference to a handler instead of directly passing the handler function:
function handler() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
}
$('.product .question-input').change(handler);
$('.product .question-checkbox').change(handler);
You can not to this with the same class names for every group, you need to separate the classes in html and create functions for each of them like this:
$('.product1 .question-checkbox1').change(function() {
if ($(this).is(':checked')) {
$('.product1 .question-input1').prop('checked', false);
}
return false;
});
end then product2, product3...

Categories

Resources