JavaScript/JQuery radio button with just text

user_14205784 0
Viewed 72

I'm trying to make an RSVP form with CSS/HTML/JS and populating it with PHP, I'm trying to make a radio button selection with just text. The two options are to Accept [X] and Decline [] with the radio changing the X between the brackets([]). I'm having trouble getting it working with multiple radio buttons because of the ids. Does anyone have any suggestions?

End result would be Accept [X] and Decline [], when accepted and Accept [] and Decline [X] when the decline is accepted for each radio.

document.body.addEventListener('change', function (e) {
  let target = e.target;
  switch (target.id) {
    case 'accept':
        break;
    case 'decline':
        break;
  }
});
label {
  display: inline-block;
  border: solid 2px red;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  border: solid 2px green;
  content: attr(decline)"TEST";
}
Nick:
<input type="radio" id="accept1" name="nick" checked>
<label for="accept1">Accept [X]</label>


<input type="radio" id="decline1" name="nick">
<label for="decline1">Decline []</label>

<br>

Joe:
<input type="radio" id="accept2" name="joe" checked>
<label for="accept2">Accept [X]</label>


<input type="radio" id="decline2" name="joe">
<label for="decline2">Decline []</label>

css html jquery javascript
1 Answers

remove the [X] and [] from label ... then add

input[type="radio"]:checked + label:after {
  content: " [X]";
}
input[type="radio"] + label:after {
  content: " []";
}

to the CSS

... also, whatever content: attr(decline)"TEST"; is, it does nothing - remove it

Result:

document.body.addEventListener('change', function (e) {
            let target = e.target;
            switch (target.id) {
                case 'accept':
                    break;
                case 'decline':
                    break;
            }
        });
label {
  display: inline-block;
  border: solid 2px red;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  border: solid 2px green;
}
input[type="radio"]:checked + label:after {
  content: " [X]";
}
input[type="radio"] + label:after {
  content: " [ ]";
}
Nick:
<input type="radio" id="accept1" name="nick" checked>
<label for="accept1">Accept</label>


<input type="radio" id="decline1" name="nick">
<label for="decline1">Decline</label>

<br>

Joe:
<input type="radio" id="accept2" name="joe" checked>
<label for="accept2">Accept</label>


<input type="radio" id="decline2" name="joe">
<label for="decline2">Decline</label>

user_50530020
Related