我有这两个单选按钮,要求用户选择两个单选按钮中的一个。我一直试图弄清楚如何设置单选按钮的样式,看起来更像常规按钮。我如何设置这些单选按钮的样式,使其看起来像普通按钮,但同时保持单选按钮行为和表单验证?
此外,我正在使用bootstrap来完成我的大部分样式,以防不清楚。
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<form class="needs-validation" novalidate>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="save" required>
<label class="form-check-label btn btn-outline-primary" for="save">
save
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="cancel" required>
<label class="form-check-label btn btn-outline-danger" for="cancel">
cancel
</label>
<div class="invalid-feedback">
select one option
</div>
</div>
</div>
<button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button>
</form>
事情有点复杂,因为你想保持单选按钮的行为。如果我们只是隐藏常规单选按钮,则用户无法选择其中任何一个。
所以这是一个繁琐的解决方法:首先,给常规单选按钮和文本标签一个唯一的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">
接下来,隐藏常规单选按钮:
document.getElementById("emailConsentRadioB").style.visibility="hidden";
document.getElementById("emailConsentRadioA").style.visibility="hidden";
然后将click事件侦听器添加到引导程序样式按钮,以便在单击后将其样式更改为填充按钮,并将其关联的常规单选按钮的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);
这是完整的例子:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
document.getElementById("emailConsentRadioB").style.visibility="hidden";
document.getElementById("emailConsentRadioA").style.visibility="hidden";
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);
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<form class="needs-validation" novalidate>
<div class="form-group">
<div class="form-check">
<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">
save
</label>
</div>
<div class="form-check">
<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">
cancel
</label>
<div class="invalid-feedback">
select one option
</div>
</div>
</div>
<button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button>
</form>
您可以将收音机放在标签内并删除for
属性,然后您可以使用此css:
label > [type=radio] { display: none }
收音机仍将作为单选按钮,它只是不可见。
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
label > [type=radio] { display: none }
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<form class="needs-validation" novalidate>
<div class="form-group">
<div class="form-check">
<label class="form-check-label btn btn-outline-primary">
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="save" required>
save
</label>
</div>
<div class="form-check">
<label class="form-check-label btn btn-outline-danger">
<input class="form-check-input" type="radio" name="choice" id="emailConsentRadio" value="cancel" required>
cancel
</label>
<div class="invalid-feedback">
select one option
</div>
</div>
</div>
<button type="submit" name="signup_signup" class="btn btn-primary btn-block" aria-describedby="signup_notes">Submit</button>
</form>