Javascript 设置引导单选按钮的样式，使其看起来像带有表单验证的普通按钮

我有两个单选按钮，要求用户从两个单选按钮中选择一个。我一直在想如何设计单选按钮，使其看起来更像普通按钮。如何设置这些单选按钮的样式，使其看起来像普通按钮，但同时保持单选按钮的行为和表单验证

此外，我正在使用引导为我的大多数造型的情况下，这是不清楚的

//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();

拯救
取消
选择一个选项
提交
您可以将收音机放在标签内并删除
for
属性，然后可以使用此css：

label > [type=radio] { display: none }

收音机仍将充当单选按钮，只是不可见而已


//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
label>[type=radio]{display:none}

拯救
取消
选择一个选项
提交
事情有点复杂，因为您希望保持单选按钮的行为。如果我们只是隐藏常规单选按钮，用户就无法选择其中任何一个

因此，这里有一个麻烦的解决方法：
首先，为常规单选按钮和文本标签指定一个唯一的id：

<input class="form-check-input" type="radio" name="choice" id="emailConsentRadioA" value="save" required>
<label class="form-check-label btn btn-outline-primary" for="save" id="saveButton">
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadioB" value="cancel" required>
<label class="form-check-label btn btn-outline-danger" for="cancel" id="cancelButton">

之后，将单击事件侦听器添加到引导样式按钮中，以在单击后将其样式更改为填充按钮，并将其关联的常规单选按钮的checked属性设置为checked。同时，对另一个按钮执行相反的操作：

function cancelPressed(e)
{
document.getElementById("saveButton").className="form-check-label btn btn-outline-primary";
document.getElementById(e.target.id).className="form-check-label btn btn-danger";
document.getElementById("emailConsentRadioB").checked=true;
}
function savePressed(e)
{
document.getElementById("cancelButton").className="form-check-label btn btn-outline-danger";
document.getElementById(e.target.id).className="form-check-label btn btn-primary";
document.getElementById("emailConsentRadioA").checked=true;
}
document.getElementById("saveButton").addEventListener("click",savePressed);
document.getElementById("cancelButton").addEventListener("click",cancelPressed);

以下是完整的示例：


//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
document.getElementById（“EmailB”）.style.visibility=“hidden”；
document.getElementById（“emaila”）.style.visibility=“hidden”；
功能取消按下（e）
{
document.getElementById（“saveButton”）.className=“表单检查标签btn btn大纲主”；
document.getElementById（e.target.id）.className=“表单检查标签btn btn danger”；
document.getElementById（“EmailB”）.checked=true；
}
功能保存已按下（e）
{
document.getElementById（“cancelButton”）.className=“表单检查标签btn btn轮廓危险”；
document.getElementById（e.target.id）.className=“表单检查标签btn btn primary”；
document.getElementById（“EmailA”）.checked=true；
}
document.getElementById（“saveButton”）.addEventListener（“单击”，按Save键）；
document.getElementById（“取消按钮”）.addEventListener（“单击”，取消按钮）

拯救
取消
选择一个选项
提交
还有另一种解决问题的方法，它不包括编写任何Javascript



拯救
取消
这似乎没有显示无效的反馈，并且当单击按钮时，按钮不会被填满这里有几个好主意：
function cancelPressed(e)
{
document.getElementById("saveButton").className="form-check-label btn btn-outline-primary";
document.getElementById(e.target.id).className="form-check-label btn btn-danger";
document.getElementById("emailConsentRadioB").checked=true;
}
function savePressed(e)
{
document.getElementById("cancelButton").className="form-check-label btn btn-outline-danger";
document.getElementById(e.target.id).className="form-check-label btn btn-primary";
document.getElementById("emailConsentRadioA").checked=true;
}
document.getElementById("saveButton").addEventListener("click",savePressed);
document.getElementById("cancelButton").addEventListener("click",cancelPressed);