pass the checked checkbox value in javascript

Question

This is the checkboxes in my HTML:

<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
<input type="checkbox" name="sides" id="3"  value="Cole Slaw">Cole Slaw<br />
<input type ="button" value = "Enter my side dish selections" onclick="checkbox(sides.value1,sides.value2)"/>

What i want is when the user clicks the button, it should take first two checked boxes and then display it as:

function checkbox(dish1,dish2) {
  document.getElementById("side_one").innerHTML = dish1;
  document.getElementById("side_two").innerHTML = dish1;
}

I am confused on how to do this, can you please help me here.

Even though you want to display only 2 options, do you want the user to select all 3 radio options also? — Gautham Churchill
– Gautham Churchill, Commented Nov 25, 2020 at 5:13
@Gautham, assuming the user selects two options only - then clicks the button. There are many options but i included only three to avoid the lengthy question. — Jonardan Cena
– Jonardan Cena, Commented Nov 25, 2020 at 5:17

Kaiido · Accepted Answer · 2020-11-25 05:19:09Z

You can select the first two checked inputs with [...document.querySelectorAll( ":checked" )].slice( 0, 2 );.

What it does is to create an Array from a NodeList made of all the elements that matches the :checked pseudo-class and slice it in an new Array of two items.

Then you just need to grab the .value of the found <input> elements:

document.querySelector('[type="button"]').onclick = (evt) => {
  const checked = [...document.querySelectorAll( ":checked" )].slice( 0, 2 );
  checkbox( ...checked.map( (input) => input.value ) )
};

function checkbox(dish1 = "", dish2 = "") {
  document.getElementById("side_one").innerHTML = dish1;
  document.getElementById("side_two").innerHTML = dish2;
}

<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
<input type="checkbox" name="sides" id="3"  value="Cole Slaw">Cole Slaw<br />
<input type ="button" value = "Enter my side dish selections"/>

<p id="side_one"></p>
<p id="side_two"></p>

If you want it to search only in the content of a specific element, you just need to make the CSS selector in querySelectorAll more specific.

Eugene Ryabtsev · Accepted Answer · 2020-11-25 04:43:22Z

0

You can use something like the following:

Array.from(document.getElementsByName('entree')).filter(input => input.checked).map(input => input.value)

This makes an array out of node list of interest, filters out all unchecked elements and returns an array that will have zero or more values depending on what is checked. You can then .join() it or otherwise do as you see fit.

answered Nov 25, 2020 at 4:43

Eugene Ryabtsev

2,3181 gold badge24 silver badges40 bronze badges

Comments

D. Seah · Accepted Answer · 2020-11-25 04:48:10Z

0

basically, radio is a NodeList, so you can do this

const radioValue = (radio.length > 0) ? radio[0].value : "";

answered Nov 25, 2020 at 4:48

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

pass the checked checkbox value in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related