How To Check If A Is Checked?

The title is self-explanatory, I tried using .checked(and several other methods that also failed), but it did not work. I want to know how, so I can count the score for a quiz. He

Solution 1:

Buttons should not be used to signify an answer unless they are part of a group of choices. Then, you have to decide if only one item from the group should be allowed to be selected or if multiple items are allowable. This is exactly what checkboxes and radio buttons are for.

Now, you don't have to show the user checkboxes or radio buttons - you can show them something that looks like a button instead, but the "buttons" need to behave either like checkboxes or radio buttons. This can be accomplished by actually using checkboxes or radio buttons, but hiding those and, instead, showing label elements that are tied to the hidden items.

Then, in your JavaScript, you can access the actual checkboxes and radio buttons as you normally would.

Here is an example of using hidden checkboxes so that multiple "button" elements can be selected:

document.getElementById("getChecked").addEventListener("click", function(){
   // Gather up all the checked checkboxes into an Array;var checkedCheckboxes =
      Array.prototype.slice.call(document.querySelectorAll("input[type='checkbox']:checked"));
      
   // Set up result arrayvar result = [];
   
   // Loop over them and add selected values to array
   checkedCheckboxes.forEach(function(checkbox){
     result.push(checkbox.value); 
   }); 
   
   // Clear old output and log new resultsconsole.clear();
   console.log(result);
});

/* Hide the checkboxes */input[type='checkbox'] { display:none; }

/* Default styling for labels to make them look like buttons */input[type='checkbox'] + label {
  display:inline-block;
  box-shadow:1px1px grey;
  border-radius:3px;
  background-color:#e0e0e0;
  padding:5px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding checkbox is checked */input[type='checkbox']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

<inputtype="checkbox"id="chk1"name="chk1"value="choice 1"><labelfor="chk1">Choice 1</label><inputtype="checkbox"id="chk2"name="chk2"value="choice 2"><labelfor="chk2">Choice 2</label><inputtype="checkbox"id="chk3"name="chk3"value="choice 3"><labelfor="chk3">Choice 3</label><p><buttonid="getChecked">Get the checked checkbox values</button></p>

Using radio buttons, so that only one "button" can be selected, is almost identical, except for the HTML uses input type=radio and the CSS and JavaScript selectors change to find those radio buttons. Also, since only one radio button can ever be selected (within any given group), there's no need to gather up all the checked radio buttons (from one group) into an array. There will just be one checked button.

document.getElementById("getChecked").addEventListener("click", function(){
   // Get the one radio button (within its group) that is checked:var checkedRadio = document.querySelector("input[type='radio'][name='rad']:checked");
   
   // Clear old output and log new resultsconsole.clear();
   console.log(checkedRadio.value);
});

/* Hide the checkboxes */input[type='radio'] { display:none; }

/* Default styling for labels to make them look like buttons */input[type='radio'] + label {
  display:inline-block;
  box-shadow:1px1px grey;
  background-color:#e0e0e0;
  padding:5px;
  border-radius:3px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding radio button is checked */input[type='radio']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

<inputtype="radio"id="rad1"name="rad"value="choice 1"><labelfor="rad1">Choice 1</label><inputtype="radio"id="rad2"name="rad"value="choice 2"><labelfor="rad2">Choice 2</label><inputtype="radio"id="rad3"name="rad"value="choice 3"><labelfor="rad3">Choice 3</label><p><buttonid="getChecked">Get the checked radio button value</button></p>

Solution 2:

An input button cannot be "checked" in itself. You have a few options for how to handle this though. You could change the elements to a form with radio buttons or checkbox buttons. However, if you want to keep the buttons you could also do something in the javascript keep_highlighted method when the button is clicked such as:

if (document.getElementById(id).classList.contains("checked")) {
    document.getElementById(id).classList.remove("checked");
} else {
    document.getElementById(id).classList.add("checked");
}

and you can get this list of "checked" buttons by using:

document.getElementsByClassName("checked");

This will toggle the "checked" class on the element, which you can get a list of elsewhere in your javascript, such as wherever your submit button directs to

EDIT: Also, you could move your button styling into these if blocks so that you could "toggle" the buttons to be highlighted or not based on them being clicked and users could also "uncheck" a selection.

Solution 3:

document.getElementById(id).setAttribute("checked","");
document.getElementById(id).removeAttribute("checked");

Solution 4:

You want to set a property such as 'checked' or 'clicked' or 'highlighted' for each button. Then when you click the button, set that to true. Then to check which have been clicked, loop those buttons and check if 'clicked' is true or false.

let buttons = document.querySelectorAll('input[type="button"]');

let buttonData = Array.from(buttons).map((el, i) => {
  el.addEventListener('click', ()=>{
    const clicked = !buttonData[i].clicked;
    buttonData[i].clicked = clicked;
    if(clicked){
      el.classList.add('highlighted');
    } else {
      el.classList.remove('highlighted');
    }
  });
  return {element: el, clicked:false}
});

buttonData.forEach((btn, i) => {
  
});

document.getElementById('check-buttons').addEventListener('click', ()=>{
  buttonData.forEach((btn, i) => {
    console.log("button:", btn.element.id, "is highlighted?", btn.clicked);
  });
});

input[type="button"] {
  min-width: 100px;
  display: block;
}
.highlighted {
  background-color: white;
  outline: 2px solid rgba(230,200,100);
}

<inputtype="button"id="button0"value="button 0"><inputtype="button"id="button1"value="button 1"><inputtype="button"id="button2"value="button 2"><inputtype="button"id="button3"value="button 3"><br><buttonid="check-buttons"> which buttons are highlighted ?</button>