Question 44927 in Html Question posted in
Some basic documentation can be found here.

Checking if two boxes are selected in Javascript – Html

I’m trying to build out a test website that basically says: if you select the peanuts checkbox, here’s a peanut free website. If you select cashews, here’s a cashew free website. If you select both, here’s a peanut and cashew free website. (In the future, I would add other checkboxes as well for other foods, and then do various combinations) I’m getting stuck on the last part, however – trying to return unique info if both checkboxes are selected.

Here’s the code I put together. Without the last else if statement, it works. But I’m not sure what I need to do with the last else if to make it function fully. Appreciate any guidance here!

function myFunction() {
    if (document.getElementById("peanuts").checked) {
        document.write(
            "<p> You have selected Peanuts. Here's a peanut-free recipe:"
        );
    } else if (document.getElementById("cashews").checked) {
        document.write(
            "<p> You have selected Cashews. Here's a cashew-free recipe:"
        );
    } else if (document.getElementById("dairy").checked) {
        document.write(
            "<p> You have selected Dairy. Here's a dairy-free recipe:"
        );
    } else if (
        document.getElementById("peanuts").checked &&
        document.getElementById("cashews").checked
    ) {
        document.write("<p> You have selected Both. Here's a nut-free recipe:");
    }
}
<input type="checkbox" name="peanuts" id="peanuts" />Peanuts<br />

<input type="checkbox" name="cashews" id="cashews" />Cashews<br />

<input type="checkbox" name="dairy" id="dairy" />Dairy<br />

<button id="myButton" type="button" value="getValue" onclick="myFunction()">
    Get Value
</button>
Tags:

3

Answers


  1. 0

    instead of writing the if condition on the value of checked, we can store it in a variable.
    Store all the .checked() values in a variable.
    Then check if any combination of two values are true.

    Let me know if you need the code for it.

    Login or Signup to reply.
  2. 0

    this is because the order of execution just needs to be reversed:

    function myFunction() {
    if (
        document.getElementById("peanuts").checked &&
        document.getElementById("cashews").checked
    ) {
        document.write("<p> You have selected Both. Here's a nut-free recipe:");
    } else if (document.getElementById("peanuts").checked) {
        document.write(
            "<p> You have selected Peanuts. Here's a peanut-free recipe:"
        );
    } else if (document.getElementById("cashews").checked) {
        document.write(
            "<p> You have selected Cashews. Here's a cashew-free recipe:"
        );
    } else if (document.getElementById("dairy").checked) {
        document.write(
            "<p> You have selected Dairy. Here's a dairy-free recipe:"
        );
    }
}

    this code is not optimized

    Login or Signup to reply.
  3. 0

    You can find all selected checkboxes with a query:

    document.querySelectorAll('input:checked')

    and prepare output based on what is selected.

    function myFunction() {
    const selected = [...document.querySelectorAll('input.food:checked')];
    if (selected.length < 1) {
      return;
    }
    if (selected.length === 1) {
      document.write(`<p> You have selected ${selected[0].name}. Here's a ${selected[0].name}-free recipe:`);
      return;
    };
    document.write('<p> You have selected multiple: ' + selected.map(input => input.name).join(', '));
}
    <input type="checkbox" name="peanuts" class="food" />Peanuts<br />

<input type="checkbox" name="cashews" class="food" />Cashews<br />

<input type="checkbox" name="dairy" class="food" />Dairy<br />

<button id="myButton" type="button" value="getValue" onclick="myFunction()">
    Get Value
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search