Question

我正在使用jquery hide，在我的注册表单中显示函数。默认情况下，从脚本中看到我的div是隐藏的。还有2个按钮：提交和重置。一切正常，但有一个问题：重置表单后它不会隐藏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/。

Answer 2

尝试委托（）

$(document).ready(function(){
$("#warr_details1").hide();
$("#warr_details2").hide();
$("body").delegate("input[name='warr']", 'click', function(){

    if ($(this).val() === '1')
    {
        $("#warr_details1").show();
        $("#warr_details2").show();
    }
    if ($(this).val() === '0')
    {
       $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
    if ($(this).val() === '')
    {
       $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
});
});

如何在表单重置后隐藏div？

2 个答案: