gpt4 book ai didi

javascript - 选择单选按钮后的文本输入字段

转载 作者:行者123 更新时间:2023-11-30 11:29:51 26 4
gpt4 key购买 nike

我正在尝试创建一个表单,当用户选择"is"单选按钮时文本字段出现,而当用户选择“否”时文本字段不会出现。我从互联网上得到了这段代码。但是,它无法工作,因为我正在使用 Laravel 并且不知道如何转换 php 代码。

这是代码:

function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = chkYes.checked ? "block" : "none";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<span>Do you have Passport?</span>
<label for="chkYes">
<input type="radio" id="chkYes" name="chkPassPort" onclick="ShowHideDiv()" />
Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chkPassPort" onclick="ShowHideDiv()" />
No
</label>
<hr />
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
</body>
</html>

最佳答案

要在单击单选按钮时显示/隐藏输入框,您需要先创建具有相同名称不同值的单选按钮。

创建一个click事件并检查值是yes还是no

相应地显示/隐藏文本框。

$('input[name="choose"]').click(function(e) {
if(e.target.value === 'yes') {
$('#optional').show();
} else {
$('#optional').hide();
}
})

$('#optional').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="choose" value='yes'>Yes
<input type="radio" name="choose" value='no'>No
<input type="text" id="optional">

关于javascript - 选择单选按钮后的文本输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46660620/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com