Question

大家晚上，

我尝试在按下最后一个单选按钮后显示内嵌块，我已尝试.show()和.checked()事件，但我现在变得绝望了。

另外，如果你能告诉我同样如何使textbox成为必需的，那将是非常有帮助的。谢谢。

以下是代码：

＆＃13;

function msgsend(ID) {
  if (ID === "nameInfo") {
	return "First one";
	}
  else if (ID === "emailInfo") {
	return "Second one";
	}
  else if (ID === "phoneInfo") {
	return "Third one";
	}
  else if (ID === "busInfo") {
    return "Fourth one";
    }
  else if (ID === "rulesInfo") {
	return "Fifth one";
	}
  else if (ID === "pubInfo") {
	return "Sixth one";
  }};

$(".hoverInfo").mousemove(function(e) {
	var hoverID = $(this).attr("ID");
	var hoverID = msgsend(hoverID);
	$("#hoverdiv").text(hoverID).show();
	$("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+10);
  }).mouseout(function() {
  $("#hoverdiv").hide();
  });

$("#busStopLocation").hide();

if (("#busStopElse").checked) {
  $("#busStopLocation").show();
  }
else {
  $("#busStopLocation").hide();
  };

＆＃13;

* {
padding: 0px;
margin: 0px;
font-family: "Aller", sans-serif;
font-weight: lighter;
font-size: 16px;
}

#mainpage {
margin: 10px;
}

#mainpage a:link, a:visited {
color: #2e8cb8;
text-decoration: underline;
}

#mainpage a:hover {
color: #265165;
}

li, #top p {
padding: 5px 0px;
}

#top ul:nth-child(3) li {
position: relative;
left: 50px;
display: block;
}

#top ul:nth-child(3) li label {
padding-left: 10px;
}

#bottom {
margin-top: 20px;
}

#bottom p {
padding: 10px 0px;
}

#bottom label {
margin-left: 10px;
}

label {
margin-right: 10px;
}

span {
margin-left: 5px;
background-color: lightblue;
border: 1px solid black;
}

.sbutton, .rbutton {
margin-top: 50px;
border: 1px solid #1c1c1c;
background-color: lightblue;
padding: 5px 10px;
}

.sbutton:hover, .rbutton:hover {
background-color: #265165;
color: white;
}

#hoverdiv {
display: none;
position: absolute;
pointer-events: none;
font-size: 16px;
background-color: lightgray;
color: black;
border: 1px solid black;
padding: 8px;
border-radius: 5px;
}

＆＃13;

<BODY ID="mainpage">

<FORM NAME="registration" METHOD="post" ACTION="form_process.php" AUTOCOMPLETE="on">
  
  <DIV ID="top">
	<UL>
	  <LI>
		<LABEL FOR="name">Your name: *</LABEL>
		<INPUT ID="name" TYPE="text" NAME="userName" AUTOFOCUS REQUIRED PLACEHOLDER="Firstname Surname" SIZE="40" />
		<SPAN CLASS="hoverInfo" ID="nameInfo">?</SPAN>
	  </LI>
	  
	  <LI>
		<LABEL FOR="email">Your email: *</LABEL>
		<INPUT ID="email" TYPE="email" NAME="userEmail" REQUIRED PLACEHOLDER="Example@example.com" SIZE="40" />
		<SPAN CLASS="hoverInfo" ID="emailInfo">?</SPAN>
	  </LI>
	  
	  <LI>
		<LABEL FOR="phone">Your phone number: *</LABEL>
		<INPUT ID="phone" TYPE="tel" NAME="userTel" REQUIRED PLACEHOLDER="Format: 0123456789" SIZE="40" MAXLENGTH="10" />
		<SPAN CLASS="hoverInfo" ID="phoneInfo">?</SPAN>
	  </LI>
	</UL>

	<P>Bus stop you're coming into bus: *
	<SPAN CLASS="hoverInfo" ID="busInfo">?</SPAN>
	</P>

	<UL>
	  <LI>
	  <INPUT TYPE="radio" NAME="busStop" ID="busStopUni" REQUIRED CHECKED><LABEL FOR="busStopUni">University</LABEL>
	  </LI>
	  
	  <LI>
	  <INPUT TYPE="radio" NAME="busStop" ID="busStopBus" REQUIRED><LABEL FOR="busStopBus">Bus Station</LABEL>
	  </LI>
	  
	  <LI>
	  <INPUT TYPE="radio" NAME="busStop" ID="busStopAir" REQUIRED><LABEL FOR="busStopAir">Air Port</LABEL>
	  </LI>
	  
	  <LI>
	  <INPUT TYPE="radio" NAME="busStop" ID="busStopElse" REQUIRED><LABEL FOR="busStopElse">Somewhere else. Where?</LABEL>
	  <INPUT TYPE="text" NAME="busStop" ID="busStopLocation" SIZE="30" PLACEHOLDER="Which bus stop?" REQUIRED />
	  </LI>
	</UL>
  </DIV>
	
  <DIV ID="bottom">
	<P>
	  <INPUT TYPE="checkbox" NAME="checkedRules" VALUE="yes" REQUIRED /><LABEL FOR="checkedRules" CLASS="hoverInfo" ID="rulesInfo">I have <A HREF="#" TARGET="_blank">read the Rules and Conditions</A> of a trip.</LABEL>
	</P>
	
	<P>
	  <INPUT TYPE="checkbox" NAME="namePublished" VALUE="yes" /><LABEL FOR="namePublished" CLASS="hoverInfo" ID="pubInfo">My name can be published on the <A HREF="#">Participant list</A>.</LABEL>
	</P>
  </DIV>

  <INPUT TYPE="submit" VALUE="Submit" CLASS="sbutton">
  <INPUT TYPE="reset" VALUE="Reset" CLASS="rbutton">
  
</FORM>

<DIV ID="hoverdiv"></DIV>

<SCRIPT TYPE="text/javascript" SRC="jquery.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="app.js"></SCRIPT>
  
</BODY>

＆＃13;

Answer 1

JS显示/隐藏字段并使其成为必需：

function msgsend(ID) {
  if (ID === "nameInfo") {
    return "First one";
    }
  else if (ID === "emailInfo") {
    return "Second one";
    }
  else if (ID === "phoneInfo") {
    return "Third one";
    }
  else if (ID === "busInfo") {
    return "Fourth one";
    }
  else if (ID === "rulesInfo") {
    return "Fifth one";
    }
  else if (ID === "pubInfo") {
    return "Sixth one";
  }};

$(".hoverInfo").mousemove(function(e) {
    var hoverID = $(this).attr("ID");
    var hoverID = msgsend(hoverID);
    $("#hoverdiv").text(hoverID).show();
    $("#hoverdiv").css("top", e.clientY+10).css("left", e.clientX+10);
  }).mouseout(function() {
  $("#hoverdiv").hide();
  });

$("#busStopLocation").hide();
$(document).ready(function(){
    $('input[type=radio]').on('change',function(){
        if ($("#busStopElse").is(':checked')) {
          $("#busStopLocation").show().attr('required',true);
        }else{
          $("#busStopLocation").hide().removeAttr('required');
        }; 
    });
});

Answer 2

靠近：

if (("#busStopElse").checked) {
   $("#busStopLocation").show();
  }

你错过了$字符。只有括号。我认为它将此解释为字符串或其他东西，它总是返回false。

但我很好奇，它没有抛出语法错误，但它在Javascript中使用了什么？有人可以对此发表评论吗？

在我的代码中按下单选按钮后，不会出现块内联

2 个答案: