Question

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

这是代码：

＆＃13;

function ShowHideDiv() {
            var chkYes = document.getElementById("chkYes");
            var dvPassport = document.getElementById("dvPassport");
            dvPassport.style.display = chkYes.checked ? "block" : "none";
        }

＆＃13;

<!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>

＆＃13;

Answer 1

要在单击单选按钮时显示/隐藏输入框，您需要先使用different value但click创建单选按钮。

创建yes事件并检查值是no还是text。

相应地显示/隐藏$('input[name="choose"]').click(function(e) { if(e.target.value === 'yes') { $('#optional').show(); } else { $('#optional').hide(); } }) $('#optional').hide();框。

＆＃13;

<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">

＆＃13;

System.setProperty("webdriver.gecko.driver", "F:\\abc\\geckodriver-v0.18.0-win64\\geckodriver.exe");
ProfilesIni profile2=new ProfilesIni();
FirefoxProfile profile3=profile2.getProfile("AutoProfile");
profile3.setPreference("browser.popups.showPopupBlocker", false);
driver =new FirefoxDriver(profile3);
driver.get("www.naukri.com");

＆＃13;

Answer 2

您的代码运行良好。你只需要在html中进行一些更改 -

<!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>
<script type="text/javascript">
    function ShowHideDiv() {
        var chkYes = document.getElementById("chkYes");
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = chkYes.checked ? "block" : "none";
    }
</script>
<span>Do you have Passport?</span>
<label for="chkYes">

    // i just set default value to you have passport

    <input type="radio" id="chkYes" checked name="chkPassPort" onclick="ShowHideDiv()" />
    Yes
</label>
<label for="chkNo">
    <input type="radio" id="chkNo" name="chkPassPort" onclick="ShowHideDiv()" />
    No
</label>
<hr />

//i just make div visible with passport number 

<div id="dvPassport">
    Passport Number:
    <input type="text" id="txtPassportNumber" />
</div>
</body>
</html>

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

2 个答案: