Remove and add checked on radio button click-CodePudding

On first click the checked mark appear and on second it disappear, on third click nothing happens. I want to repeat the first two steps on click.

let yesBtn = document.querySelectorAll('input[type="radio"]');
yesBtn.forEach(function(e){
    e.addEventListener("click" , function(){
        e.checked = true;
        e.addEventListener("click" , function(){
            e.checked = false;
        })
    })
})

<input type="radio" id="future_type" name="What type of products would you like to see in the future? Gels" value="Gels">
<label for="future_type"> Gels </label><br>

<input type="radio" id="future_type" name="What type of products would you like to see in the future? Eye care" value="Eye care">
<label for="future_type"> Eye care </label><br>

CodePudding user response：

You're not supposed to leave radio buttons blank. They're allowed to be blank so you can avoid setting defaults as mentioned in the question about setting a default gender. You can't not pick a gender, it's a required field, though you can leave a "prefer not to say" etc. option; this is different than the user never touching the radio button, however. If the field is required, not setting a default allows extremely useful behavior; You force the user to fill in the field and you don't assume a default.

Say it's an extremely important yes/no question; the user is legally responsible for this yes/no question. You can't pick a default setting for the user in this case! But still, this option can't be left blank, they have to commit to one or the other. How is this helpful? You catch this in validation (preferably in page). This lets you make sure the user has filled in the field, rather than assuming the default, which can be very important.

As for your extra question: Anyone that's used a web form (or many OS forms) is familiar with how radio buttons work since they're so common. The first time they see a radio button they might click it again to try and untick it, but they'll quickly learn. And more importantly, radio buttons function like many physical buttons in real life — originally named after buttons on radios that shared the same functionality.

You press in a button, it goes click, and it stays depressed in a state where the user can no longer press it again. Other buttons on the same control press out other buttons. Old cassette tape players used these; pressing fast-forward or play popped out the "Stop" button because both functions can't happen at the same time.

Users that have used buttons know you can't "unpush" a button. The difference with radio buttons is that some buttons push out other buttons.

So in conclusion you are better off using checkboxes if you want to allow the user to untoggle the buttons, if you want to use radio buttons then add a third button saying "None".

<fieldset>
  <h2>If allowed to leave empty</h2>
  <input type="checkbox" id="future_type" name="What type of products would you like to see in the future? Gels" value="Gels">
  <label for="future_type"> Gels </label><br>

  <input type="checkbox" id="future_type" name="What type of products would you like to see in the future? Eye care" value="Eye care">
  <label for="future_type"> Eye care </label><br>
</fieldset>


<fieldset>
  <h2>If a input is required </h2>
  <input type="radio" id="future_type" name="action" value="Gels">
  <label for="future_type"> Gels </label><br>

  <input type="radio" id="future_type" name="action" value="Eye care">
  <label for="future_type"> Eye care </label><br>

  <input type="radio" id="future_type" name="action" value="None">
  <label for="future_type"> None </label><br>
</fieldset>

CodePudding user response：

Try to add the 'if' operator.

let yesBtn = document.querySelectorAll('input[type="radio"]');
yesBtn.forEach(function(e){
    e.addEventListener("click" , function(){
        if (!e.checked) {
            e.checked = true;
        }
        if (e.checked) {
            e.checked = false;
        }
    })
})

CodePudding user response：

The Answer from @Peter S. did not work for me. I found that this worked the best:

let yesBtn = document.querySelectorAll('input[type="radio"]');
yesBtn.forEach(function(e){
    let checked;
    e.addEventListener("click" , function(event){
        e.checked = !checked;
        checked = !checked;
        console.log(e.checked);
    })
})

Also I'm of course not sure but I think that the reason for using radio buttons was because of their look and I know that checkboes can be modified, but it's just a lot of work...