如何设置单击特定单选按钮时所需的选择表单?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何设置单击特定单选按钮时所需的选择表单?相关的知识,希望对你有一定的参考价值。
如果这是一个愚蠢的问题,我很抱歉,但我有一个带单选按钮的表格。基本上是是和否按钮。我也有一个选择栏,但我希望除非选中单选按钮“是”,否则不会被视为提交表单。我使用的javascript涵盖了所有内容,除了这个特定的实例。当选择是单选按钮时,我需要使选择项成为必需项。我发布了html代码,但我不确定是否还需要javascript。我会编辑它,如果是的话。
<label for="yes"><input type="radio" id="yes" name="refee" value="yes" class="radio">Yes</label>
<label for="no"><input type="radio" id="no" name="refee" value="no" class="radio">No</label>
<<label for="Age range">Age range: </label>
<select id="refT">
<option selected="selected">20-30</option>
<option>30-40</option>
<option>40-50</option>
<option>60+</option>
</select>
<br><input type="submit" value="Submit"><br>
<br><input type="reset" value="Reset"><br>
</form>
window.onload = initForm;
function initForm() {
document.forms[0].onsubmit = validForm;
document.getElementById("sunroof").onclick = doorSet;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
if (allGood && !isNum(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isZip":
if (allGood && !isZip(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "email":
if (allGood && !validEmail(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value == document.getElementById(otherFieldID).value);
}
function radioPicked(radioName) {
var radioset = document.forms[0][radioName];
if (radioSet) {
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
}
return false;
}
function isNum(passedVal) {
if (passedVal == "") {
return false;
}
for (var k=0; k<passedVal.length; k++) {
if (passedVal.charAt(k) < "0") {
return false;
}
if (passedVal.charAt(k) > "9") {
return false;
}
}
return true;
}
function isZip(inZip) {
if (inZip == "") {
return true;
}
return (isNum(inZip));
}
function validEmail(email) {
var invalidChars = " /:,;";
if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}
}
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
答案
如果要根据单选按钮值隐藏/显示范围并相应地设置或删除required
属性,可以尝试以下方法:
document.querySelectorAll('[name=refee]').forEach(function(rad){
rad.addEventListener('change', function(){
var rangeStyle = document.getElementById('range').style;
if(this.value == 'yes'){
rangeStyle.display='inline-block';
document.getElementById('refT').required = true;
}
else{
rangeStyle.display='none';
document.getElementById('refT').removeAttribute('required');;
}
});
});
#range{
display: none;
}
<form>
<label for="yes"><input type="radio" id="yes" name="refee" value="yes" class="radio">Yes</label>
<label for="no"><input type="radio" id="no" name="refee" value="no" class="radio">No</label>
<div id="range">
<label for="Age range">Age range: </label>
<select id="refT">
<option value="">Select</option>
<option>20-30</option>
<option>30-40</option>
<option>40-50</option>
<option>60+</option>
</select>
</div>
<br><input type="submit" value="Submit"><br>
<br><input type="reset" value="Reset"><br>
</form>
另一答案
首先,您需要选择空值。否则,选择始终将是内容值,并且不会为空。
第二,添加脚本
$(document).on('click', '[name=refee]', function(){
$("#refT").attr("required", $(this).val()=='yes');
});
设置'required'属性进行选择
以上是关于如何设置单击特定单选按钮时所需的选择表单?的主要内容,如果未能解决你的问题,请参考以下文章