2016-04-26 9 views
0

新しいです。選択した内容に基づいて関連する入力を有効にします。ここに私のページのHTMLjqueryでラジオボタンを選択できません

<body> 

<form id="add_employer" method="post" action="."> 
    <input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' /> 

    <p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li> 
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p> 
<p><label for="id_emp_family_name">Employer&#39;s Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p> 
<p><label for="id_emp_first_name">Employer&#39;sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p> 
<p><label for="id_emp_middle_name">Employer&#39;s Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p> 
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p> 
    <input type="submit" value="Add" /> 
</form> 
</body> 

、ここでは私のJSは

$(document).ready(function(){ 
      $("p:has(input)").hide() 
      $("[value^='Add']").hide() 
      //$("#id_emp_family_name").click(function(){ }); 
     }); 


     $("label:contains('Individual')").click(function(){  
      $("p:has(input)").unhide() 
     }); 

ですラジオボタンの一つがclicked.The入力フィールドがクリックに再表示しなければならないとなっているが、それらがある場合、どのように見つける方法を教えてください。隠れてはならない。 HTMLを更新せず

答えて

0
<body> 

<form id="add_employer" method="post" action="."> 
    <input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' /> 

    <p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li> 
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p> 
<div id="divIndividual"> 
<p><label for="id_emp_family_name">Employer&#39;s Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p> 
<p><label for="id_emp_first_name">Employer&#39;sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p> 
<p><label for="id_emp_middle_name">Employer&#39;s Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p> 
</div> 
<div id="divCompany"> 
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p> 
</div> 
    <input type="submit" value="Add" /> 
</form> 
</body> 

Javascriptを

$(document).ready(function(){ 
      $("#divIndividual").hide(); 
      $("#divCompany").hide(); 
      $("[value^='Add']").hide(); 
      //$("#id_emp_family_name").click(function(){ }); 
     }); 


     $("label:contains('Individual')").click(function(){  
      $("#divIndividual").show(); 
      $("#divCompany").hide(); 
      $("[value^='Add']").show(); 
     }); 

$("label:contains('Company')").click(function(){  
      $("#divIndividual").hide(); 
      $("#divCompany").show(); 
      $("[value^='Add']").show(); 
     }); 

ソリューション:

$(document).ready(function(){ 
      $("p:has(input)").hide() 
      $("[value^='Add']").hide() 
      //$("#id_emp_family_name").click(function(){ }); 
     }); 


     $("label:contains('Individual')").click(function(){ 
     $("p:has(input)").hide() 
      $("#id_emp_family_name").closest("p").show(); 
      $("#id_emp_first_name").closest("p").show(); 
      $("#id_emp_middle_name").closest("p").show(); 
      $("[value^='Add']").show() 

     }); 

$("label:contains('Company')").click(function(){  
$("p:has(input)").hide() 
$("#id_emp_coname").closest("p").show(); 
$("[value^='Add']").show() 

     }); 
+0

フィドルにあなたのコード:https://jsfiddle.net/normangr7/4ta8aerm/1/ –

+0

私の謝罪。私はそれを変更しましたが、それはまだ動作しません。 – krishan

+0

は、あなたのhtml abitの構造を変更しました。ここにjsfiddleの最新の実例があります:https://jsfiddle.net/normangr7/4ta8aerm/3/ –

関連する問題