[英]HTML check values of two radio buttons with js
我的HTML中有兩個單選按鈕。 其中至少有一個值必須為“是”。 我想在用戶選擇第二個值時檢查值(如果為“是”,那么我們不在乎,如果為“否”,那么我們必須檢查第一個值是什么)。 我嘗試使用此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>
我認為這樣可能有效:
<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>
當前,您沒有id
“ email”的元素,也沒有id
“ number”的元素。 您應該在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.