2014-12-28 3 views
0

확인란을 사용하고 있으며 확인란을 클릭하면 필드가 표시되거나 숨 깁니다. 확인란을 클릭하고 필드가 표시 될 때만 정보를 입력하도록 필드를 지정해야합니다. 필드가 숨겨져 있고 확인란을 클릭하지 않으면 해당 필드에 정보를 입력 할 필요가 없습니다. 어떻게해야합니까? 이것은 내가 사용하고있는 코드입니다.일단 체크 박스를 클릭하면 양식 필드가 필요합니까?

<script type="text/javascript" language="JavaScript"> 
function HidePart(d) { 
document.getElementById(d).style.display = "none"; 
} 
function ShowPart(d) { 
document.getElementById(d).style.display = "block"; 
} 
function CheckboxChecked(b,d) 
{ 
if(b) { 
ShowPart(d); 
} 
else { 
HidePart(d); 
} 
} 
</script> 


    <input type="checkbox" name="Loan2" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv2')"> Add New Loan 


<div id="checkboxdiv2" style="display:none"> 
Form Fields for input information 
</div> 

이것이 도움이 될 경우, 이것은 내 웹 사이트 : https://www.slfpusa.org/testing-page/입니다. "새 대출 추가"를 클릭하면 더 많은 필드가 생성됩니다. 내 질문에 분명히 희망, 나는이 함수를 필요로하는 방식으로 작동하도록이 자바 스크립트 코드를 수정하는 데 도움이되기를 바랍니다. 어떤 도움을 많이 주시면 감사하겠습니다!

+0

클릭하면 제출 양식이 제출되지 않습니다 - 가져 오기 스크립트에 문제가 있습니다 -

0

어디에서 else if 문을 사용해야합니까? 현재 코드에 어떻게 배치합니까?

if (document.loan2.checked) { 
    // validate the input 
} else { 
    return false; 
} 
0

나는 이것을 가능한 한 명확하게하려고 노력했다. 그냥 의견을 읽고 모두 잘되어야합니다.

<html> 
<head> 
    <!--Add this JQuery library to make this a whole lot easier for you--> 
    <!--This library provides a more effecient way of writing javascript--> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
</head> 

<body> 
    <form> 
    <input id ="checkboxId" type ="checkbox">Add new Loan</input><br> 

    <label style="display:none">Enter value:</label> 
    <input id="textboxId" style="display:none" type ="text"/> 
    <button style="display:none" type ="submit">Click Me</button> 
</form> 

<script> 

//In between your script tags add the following JQuery code 

//This will check if the check box is clicked 
$('#checkboxId').click(function() { 

    //if checkbox is clicked then make the textbox required 
    if ($('#checkboxId').prop('checked')) 
    { 
    $("#textboxId").prop('required',true); 
     $("#textboxId").slideDown(); 
     $("label").slideDown(); 
     $("button").slideDown(); 
    } else { 
    //else do not make the textbox required 
    $("#textboxId").prop('required',false); 
     $("#textboxId").slideUp(); 
     $("label").slideUp(); 
     $("button").slideUp(); 
    } 

}); 
</script> 
</body> 
</html> 

질문이 있으면 알려주세요. 희망이 있습니다

관련 문제