仅包含文本的JavaScript/JQuery单选按钮

Question

我试图用CSS/HTML/JS创建一个RSVP表单，并用PHP填充它，我试图用文本来选择一个单选按钮。两个选项是接受X和拒绝[]，同时单选框更改括号([])之间的X。由于I的原因，我在使用多个单选按钮时遇到了问题。有人有什么建议吗？

最终结果将是接受X和拒绝[]，接受时接受[]，并在每个单选接受拒绝时拒绝X。

​

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>

​

Answer 1

从标签中删除[X]和[] ...然后添加

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

到CSS

..。此外，无论content: attr(decline)"TEST";是什么，它都不会做任何事情--删除它

结果：

​

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>

​