我正在尝试编写html css js代码。在其中的一部分中,我有一组单选按钮(包括2个项目)。我希望这种情况发生:如果我单击第一个单选按钮,则出现textbox1,如果我单击第二个单选,则textbox1消失,textbox2出现,反之亦然。
当我单击其中一个时,这种情况正在发生,但是当我单击第二个时,它不起作用。
这是我的html代码:
<label>Which one do you want to enter?</label>
<br/>
<label>Budget:</label>
<input name = "submethod" id = "submethodbudget" type="radio" value = "bud"/>
<div id = "smethod" style="display:none">
<input type="text" name = "budgetsub">
</div>
<label>Number of Clicks per Month:</label>
<input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/>
<div id = "smethod2" style="display:none">
<input type="text" name = "clicksnosub">
</div>
<br/>
这是我的js:
<script type="text/javascript">
$("#submethodbudget").click(function() {
$("#smethod").show("300");
$('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none');
});
$("#submethodbudget").click(function() {
$("#smethod2").hide("300");
});
</script>
<script type="text/javascript">
$("#submethodclicks").click(function() {
$("#smethod2").show("300");
$('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none');
});
$("#submethodclicks").click(function() {
$("smethod").hide("300");
});
</script>
你能告诉我我在做什么错吗?
改变
$("smethod").hide("300");
到 :
$("#smethod").hide("300");
我编辑您的代码:
<html>
<head>
</head>
<body>
<label>Which one do you want to enter?</label>
<br/>
<label>Budget:</label><input name = "submethod" id = "submethodbudget" type="radio" value = "bud"/>
<div id = "smethod" style="display:none">
<input type="text" name = "budgetsub">
</div>
<label>Number of Clicks per Month:</label><input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/>
<div id = "smethod2" style="display:none">
<input type="text" name = "clicksnosub">
</div>
<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$("#submethodbudget").click(function() {
$("#smethod").show("300");
$('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none');
$("#smethod2").hide("300");
});
$("#submethodclicks").click(function() {
$("#smethod2").show("300");
$('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none');
$("#smethod").hide("300");
});
</script>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句