使用js的两个单选按钮的HTML校验值
使用js的两个单选按钮的HTML校验值
提问于 2018-08-04 06:28:50
我的HTML中有两个单选按钮。它们中至少有一个的值必须为"yes“。我想要检查当用户在第二个上执行逻辑时的值(如果是"yes"，那么我们不关心，如果是"no"，那么我们必须检查第一个的值是什么)。我尝试使用此JavaScript代码，但它不起作用。有人能帮我一下吗？谢谢。
<div class="form-row">
<div class="form-group col-md-4">
<label class="form-text">Show email.</label>
</div>
<div class="form-group col-md-8">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="email" id="yes" value="yes" autocomplete="off" checked="checked"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="email" id="no" value="no" autocomplete="off"> No
</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label class="form-text">Show number.</label>
</div>
<div class="form-group col-md-8">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="number" id="yes" value="yes" autocomplete="off" checked="checked"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="number" id="no" value="no" autocomplete="off" onclick="check(this)"> No
</label>
</div>
</div>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
if (document.getElementById('email').value == "no" && document.getElementById('number').value == "no")
{
input.setCustomValidity('One must be yes.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>回答 2
Stack Overflow用户
发布于 2018-08-04 07:06:06
我认为像这样的东西可能会起作用：
<label class="btn btn-secondary active">
<input type="radio" name="email" id="firstRadioTrue" value="yes" autocomplete="off" checked="checked"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="email" id="firstRadioFalse" value="no" autocomplete="off"> No
</label>
<label class="btn btn-secondary active">
<input type="radio" name="number" id="secondRadioTrue" value="yes" autocomplete="off" checked="checked"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="number" id="secondRadioFalse" value="no" autocomplete="off"> No
</label>
<script language='javascript' type='text/javascript'>
var radioTopOne = document.getElementById('firstRadioTrue');
var radioTopTwo = document.getElementById('firstRadioFalse');
var radioOne = document.getElementById('secondRadioTrue');
var radioTwo = document.getElementById('secondRadioFalse');
radioOne.addEventListener('click',function(){
if(radioOne.checked == true && radioTopOne.checked == true){
alert("BOTH TRUE");
}
else if(radioOne.checked == true && radioTopOne.checked == false){
alert("TOP FALSE, BOT TRUE");
};
});
radioTwo.addEventListener('click',function(){
if(radioTwo.checked == true && radioTopTwo.checked == true){
alert("BOTH FALSE");
}
else if(radioTwo.checked == true && radioTopTwo.checked == false){
alert("BOT FALSE, TOP TRUE");
}
});
</script>Stack Overflow用户
发布于 2018-08-04 07:15:08
当前，您没有包含电子邮件编号的元素，也没有包含编号为id的元素。您应该为在if语句中使用的两个单选按钮提供一个id，您可以用它检查它们是否被选中(HTMLInputElement.checked)。即使没有检查，input的值也始终是相同的。
<div class="form-row">
<div class="form-group col-md-4">
<label class="form-text">Show email.</label>
</div>
<div class="form-group col-md-8">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="email" id="showemailyes" value="yes" autocomplete="off" checked="checked"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="email" id="showemailno" value="no" autocomplete="off"> No
</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label class="form-text">Show number.</label>
</div>
<div class="form-group col-md-8">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="number" id="shownumberyes" value="yes" autocomplete="off" checked="checked"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="number" id="shownumberno" value="no" autocomplete="off" onclick="check(this)"> No
</label>
</div>
</div>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
if (document.getElementById('showemailno').checked && document.getElementById('shownumberno').checked)
{
alert("One must be yes.");
input.setCustomValidity('One must be yes.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51680792
复制相关文章
相似问题