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

问题描述：

我正尝试创建一个表单，当用户选择“是”单选按钮时出现文本字段，并且当用户选择“否”时文本字段不会出现。我从互联网上得到了这段代码。但是，它不能像我使用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>

您的代码工作正常，我没有在这里找到任何问题。 –

您的代码似乎正常工作，您在浏览器的控制台中是否看到任何错误？ –

Well Larvel是一个'PHP'框架，所以你可以在'PHP'文件中使用'JavaScript'。而你所要求的是用'JavaScript'等客户端语言完成的。 'PHP'是一种服务器端语言，在你的情况下不会对你有所帮助。 – Sand

答

您的代码运行良好。你只需要在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>

让我知道如果它不适合你....如果工作，请接受作为正确的答案 –

该代码在php中工作，但我需要它在Laravel – Neal23

您是否在谈论刀片模板... –

答

一些改变显示的单选按钮的点击/隐藏输入框，你需要首先创建一个same name但different value单选按钮。

创建一个click事件并检查值是否为yes或no。

相应地显示/隐藏text框。

$('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">

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

相关推荐