Question

我需要根据复选框选择显示和隐藏一些表单元素。

这是我的HTML：

<div class="form-group">
    <label>
        <input name="address_check" value="1" type="checkbox">
        <span class="lbl"> Yes, My postal address is different</span>
    </label>
</div>

<div id="address2"> 
    <div class="form-group">
        <label class="control-label" for="street_no">Street No:</label>
        <div class="col-xs-12 col-sm-9">
                <input type="text" name="street_no" class="col-xs-12 col-sm-4" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="street_name">Street Name:</label>
        <div class="col-xs-12 col-sm-9">
             <input type="text" name="street_name" class="col-xs-12 col-sm-4" />
        </div>
    </div>
</div>

如果选中#address2复选框，我想显示address_check DIV，其他方面应该隐藏它。

这是我试过的方式。

$('input[name="address_check"]').bind('change',function(){
  $('#address2').fadeToggle(!$(this).is(':checked'));
});

我的问题是，当我要切换时，我想重置address2 div中的表单元素。重置意味着我想要清空这些元素。

有人能告诉我怎么做吗？谢谢。

Answer 1

尝试做：

$('#address2').find("input").val("");

$("#address2").find('select option:first').prop('selected',true);

工作fiddle

Answer 2

试试这个：

var address2 = $('#address2');
$('input[name="address_check"]').bind('change',function(){
    var isChecked = $(this).is(':checked');

    isChecked ? address2.fadeIn() : address2.fadeOut();

    if(!isChecked)
    {
        address2.find('input, textarea').val('');
        address2.find('select').prop('selectedIndex',0);
    }
});

Answer 3

最简单的方法是使用：

    $("#address2 :input").val("");
    $("#address2 :select").prop('selected',false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(function(){
	$('input[name="address_check"]').bind('change',function(){
		  $('#address2').fadeToggle(!$(this).is(':checked'));
		  $("#address2 :input").val("");
		  $("#address2 :select").prop('selected',false);
		});
});

</script>

<div class="form-group">
    <label>
        <input name="address_check" value="1" type="checkbox">
        <span class="lbl"> Yes, My postal address is different</span>
    </label>
</div>

<div id="address2"> 
    <div class="form-group">
        <label class="control-label" for="street_no">Street No:</label>
        <div class="col-xs-12 col-sm-9">
                <input type="text" name="street_no" class="col-xs-12 col-sm-4" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="street_name">Street Name:</label>
        <div class="col-xs-12 col-sm-9">
             <input type="text" name="street_name" class="col-xs-12 col-sm-4" />
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label" for="street_name">select Name:</label>
        <div class="col-xs-12 col-sm-9">
             <select name="name" class="col-xs-12 col-sm-4" >
             <option value="1">1</option>
             <option value="2">2</option>
              </select>
        </div>
    </div>
</div>

Answer 4

试试这个

$('input[name="address_check"]').bind('change',function(){
  $('#address2').fadeToggle(!$(this).is(':checked'));

      $('#address2').find("input").val("");

});

Jquery切换和重置表单元素

4 个答案: