jquery - 表单重置后如何隐藏div？

Question

我在注册表单中使用 jquery hide, show 函数。默认情况下，我的 div 是隐藏的，正如您从脚本中看到的那样。还有 2 个按钮:提交和重置。一切正常，但有 1 个问题:重置表单后，它不会隐藏 div #warr_details1 和 #warr_details2。表单重置后如何隐藏它们？

更新

<form id="reg" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">
<fieldset>
<legend>Şirkət Haqqında</legend>
<table>
<tr><td width="270px" align="left">Şirkət: <input  placeholder="Şirkət" type="text" name="company"></td>
<td width="340px" align="right">Ünvanı: <input placeholder="Ünvanı" type="text" name="address"></td></tr>
</table>
</fieldset>
<fieldset>
<legend>Məsul şəxs</legend>
<table>
<tr>
<td width="270px" align="left">Məsul şəxs: <input placeholder="Məsul şəxs" type="text" name="contact_name"></td>
<td width="340px" align="right">Əlaqə telefonu: <input placeholder="Əlaqə telefonu" type="tel" name="contact_phone"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Zəmanət</legend>
<table>
<tr><td rowspan="2">
<label for="warr">Zəmanət</label><input type="radio"  name="warr" value="1">Var 
<input type="radio" name="warr" value="0">Yoxdur
</td>
<td id="warr_details1">Verilmə tarixi (<input id="todayBox" type="checkbox"> Bugün) <input type="text" placeholder="Verilmə tarixi" id="warr_start" name="warr_start"/></td>
<script type="text/javascript">
$("#todayBox").change(function() {
    var dateStr;
    if (this.checked) {
        var now = new Date();
        dateStr = now.getDate() + "." + (now.getMonth() + 1) + "." + now.getFullYear();
    } else {
        dateStr = "";
    }
    $("#warr_start").val(dateStr);
});
</script>
</tr>
<tr id="warr_details2">
<td>Neçə il müddətinə? <input type="number" min="0" name="warr_year"/></td>
</tr>
<script type="text/javascript"/>
$(document).ready(function(){
$("#warr_details1").hide();
$("#warr_details2").hide();

$("input[name='warr']").click(setDisplay);
$("input[type='reset']").click(function() {
    setTimeout(setDisplay, 1);  // setDisplay after the form is reset
});

function setDisplay() {
    var val = $("input[name='warr']").val();
    if (val === '1') {
        $("#warr_details1").show();
        $("#warr_details2").show();
    } else if (val === '0' || val === '') {
        $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
}
});
</script>
</table>
</fieldset>
<table>
<tr>
<td colspan="2" style="text-align:center"><input type="submit" class="button red" name="submit" value="OK" />
<input type="reset" class="button white" value="Təmizlə" /></td>
</tr>
</table>

  </form>

Answer 1

将隐藏逻辑放入一个可以从多个位置调用的通用函数中。然后，从您希望该函数处于事件状态的所有位置调用该函数，包括单击重置按钮。现在我可以看到您的 HTML，类似这样的内容应该可以工作:

$("#warr_details1").hide();
$("#warr_details2").hide();

$("input[name='warr']").click(setDisplay);
$("input[type='reset']").click(function() {
    setTimeout(setDisplay, 1);  // setDisplay after the form is reset
});

function setDisplay() {
    var val = $("input:radio[name=warr]:checked").val();
    if (val === '1') {
        $("#warr_details1").show();
        $("#warr_details2").show();
    } else if (!val || val === '0') {
        $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
}

还有一个演示:http://jsfiddle.net/jfriend00/5cFCb/ .