텍스트 라디오 버튼을 선택한 후 입력 필드

사용자가 '예'라디오 버튼을 선택할 때 텍스트 필드가 나타나는 양식을 만들려고하고 있으며 사용자가 '아니오'를 선택하면 텍스트 필드가 나타나지 않습니다. 나는 인터넷에서이 코드를 얻었다. 그러나 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>

출처

2017-10-10 Neal23

귀하의 코드가 잘 작동, 나는 여기에 어떤 문제를 찾을 수 없습니다. –

코드가 제대로 작동하는 것 같습니다. 브라우저의 콘솔에 오류가 있습니까? –

글쎄, 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>

출처

2017-10-10 07:20:20

그것이 당신을 위해 작동하지 않는 경우 알려주십시오 .... 올바른 대답으로 받아 들여주십시오 제발 –

코드는 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">

출처

2017-10-10 07:25:11

텍스트 라디오 버튼을 선택한 후 입력 필드

답변

관련 문제