如何使用 JavaScript 验证单选按钮？

Question

How do I validate a radio button? I want to make it so that if the user left the radio button unclicked the section background will turn a red colour/color.

Here is the HTML Page

<p id="caption_project">Project Selection
    <br/>
    <input type="radio" name="f__project" id="in_restaurant" value="restaurant"/>
    <label for="in_restaurant">LEGO Project</label>
    <br/>

    <input type="radio" name="f__project" id="in_humber" value="Humber News"/>
    <label for="in_humber">Humber Current Project</label>
                        <br/>

    <input type="radio" name="f__project" id="in_self" value="self-determined"/>
    <label for="in_self">Self-determined Project</label>
</p>

So how do I turn the background red when they leave it unchecked?

Answer 1

Use document.querySelector("input[name='f__project']:checked") . If this returns null , none of the radio buttons were checked, and you can display the red background.

If this is in a <form> you can add the required attribute to the radio buttons. If they try to submit the form without selecting one of them, the browser will display a validation error.

Answer 2

You need to think of some event the user will fire which you want to trigger the function that makes the background go red. That could be if the user clicks on the next form control. Then when that event fires you test whether they checked any radio buttons. If they did not ( !checked ) then you set the style attribute of your p element to background:red:

 const nextThing = document.querySelector('#next-thing'); const p = document.querySelector('p'); nextThing.addEventListener('click', function(){ const checked = document.querySelector("input[name='f__project']:checked"); if(.checked){ p,setAttribute('style': 'background;red'); } });

 <p id="caption_project">Project Selection <br/> <input type="radio" name="f__project" id="in_restaurant" value="restaurant"/> <label for="in_restaurant">LEGO Project</label> <br/> <input type="radio" name="f__project" id="in_humber" value="Humber News"/> <label for="in_humber">Humber Current Project</label> <br/> <input type="radio" name="f__project" id="in_self" value="self-determined"/> <label for="in_self">Self-determined Project</label> </p> <button id='next-thing'>Next form control</button>

Answer 3

Use document.getElementById('id').checked the statement returns True or False.

Answer 4

const checkedRadioButton = document.
   querySelector("input[name='f__project']:checked");

if (!checkedRadioButton) {
  // No values are selected
} else {
  // Some value is selected and the element is stored in checkedRadioButton
}

Answer 5

You can use CSS to manipulate the colour depending on whether the radio input is checked or not.

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  border: 5px solid lightblue;
  background-color: lightblue;
  cursor: pointer;
  display: block;
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
}
input[type="radio"]:checked + label {
  border: 5px solid blue;
  background-color: dodgerblue;
}

Or else you can make a Javascript function to check

function checkRadioValidity() { 
            if(document.getElementById('in_restaurant').checked) {
                //change CSS here for the element
            }
}

Answer 6

The idea of radio button is that it can not be unchecked.

EDIT:

document.querySelector("input[name='f__project']:checked")

will return element if it is checked