Question

我是新人。我希望根据所做的选择激活相关输入。这是我的页面的HTML

<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()
        });

请告诉我如何找到其中一个单选按钮是否被点击。输入字段应该在点击时取消隐藏，但它们不会取消隐藏。

Answer 1

<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();
        });

无需更新HTML的解决方案：

$(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()

        });

无法在jquery中选择单选按钮

1 个答案: