Question

朋友我有一个包含4个性别单选按钮的各种字段的表单。点击它将打开相应的div。我想验证相应的open div中的元素。这是代码

<form action="" method="post" name="signup_form" id="signup_form" enctype="multipart/form-data" onSubmit="javascript: return validate_signup(this);">    
    <div>
        Name
        <input type="text" name="mdl_fname" id="mdl_fname" value="" />
        <br />
        <br />
    </div>

    <div>
        <input type="radio" name="sex" id="male" value="Male" onclick="ShowHidediv();" />Male
        <br />
        <input type="radio" name="sex" id="female" value="Female" onclick="ShowHidediv2();" />Female
        <br />
        <input type="radio" name="sex" id="transmale" value="Transgender Male" onclick="ShowHidediv();" />Transgender Male
        <br />
        <input type="radio" name="sex" id="transfemale" value="Transgender Female" onclick="ShowHidediv2();" />Transgender Female
    </div>

    <div id="dtls">
        <p>Select Gender to View Details</p>
    </div>    
    <!-- female content starts -->
    <div id="female-content" style="display:none; border:1px solid #FF0000; width:300px; padding:20px; margin:20px 0px;">
        <select name="f-hgt" id="f-hgt">
            <option selected="selected" value="">--- Female ---</option>
            <option value="Hi">Hi</option>
        </select>
    </div>
    <!-- female content ends -->

    <!-- male content starts -->
    <div id="male-content" style="display:none; border:1px solid #FF0000; width:300px; padding:20px; margin:20px 0px;">

        <input type="text" name="m-hgt" id="m-hgt" value="" />
        <!-- 
    <select id="m-hgt" name="m-hgt">
        <option selected="selected" value="">--- Male ---</option>
        <option value="Hello">Hello</option>
    </select>
    -->
    </div>
    <!-- male content ends -->    
    <div>
        <input name="submit" id="submit" type="submit" />
    </div>
</form>

Answer 1

你可以这样做：

$('#male').on('click', function() {
    $('#male-content').show();
}

修改如果你真的想在这里使用你的功能是如何做到的：

var ShowHidediv = function() { $('#male-content').show(); }

Answer 2

不确定是否要切换显示模式，但您可以尝试这样做。它会给你一个很好的过渡：

$('#male').on('click', function() {
   $('#male-content').fadeToggle('slow');
}

Javascript验证在显示块元素上

2 个答案: