个人中心
gpt4 book ai didi

javascript - 在我的代码中按下单选按钮后， block 内联没有出现

转载 作者：行者123 更新时间：2023-11-28 17:31:30 25 4
gpt4 key购买 nike

大家晚上好

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

此外，如果您能同时告诉我如何使出现的 textbox 成为 REQUIRED，那将非常有帮助。谢谢。

代码如下:

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();
  };
* {
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;
}
<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>

最佳答案

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');
        }; 
    });
});

关于javascript - 在我的代码中按下单选按钮后， block 内联没有出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26005513/

25 4 0
文章推荐： javascript - AJAX:如何读取 JSON 数据
文章推荐： python - 快速索引
文章推荐： ios - 在 webRTC ios 中进行音频通话时，我如何知道两个客户端之间的网络丢失
文章推荐： python - SGD - 损失在一些迭代后开始增加
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com