<分区>
我正在尝试使用 jquery 函数在选中复选框时隐藏/显示某些表单元素。选中单选按钮时,还应该使用相同的功能来隐藏/显示表单元素。问题出在单选按钮上。我的函数无法判断何时取消选中单选按钮,因此现在可以隐藏选中时可见的 div,因为它未选中。我已经显示了下面的代码:
<!-- html on one of the pages -->
<fieldset>
<label for="viaMail">Send offers to my mail</label>
<input type="checkbox" id="viaMail" class="slide" autocomplete="off">
<label for="viaEmail">Send offers to my email address</label>
<input type="checkbox" id="viaEmail" autocomplete="off">
</fieldset>
<div class="viaMail"> <!-- div hidden with css using display: none rule -->
<!-- input fields for mailing addresses etc -->
</div>
<!-- end page one html -->
<!-- html on page two -->
<fieldset>
<label for="viaMail">Send offers to my mail</label>
<input type="radio" name="group1" id="viaMail" class="slide" autocomplete="off">
<label for="viaEmail">Send offers to my email address</label>
<input type="radio" name="group1" id="viaEmail" autocomplete="off">
</fieldset>
<div class="viaMail"> <!-- div hidden with css using display: none rule -->
<!-- input fields for mailing addresses etc -->
</div>
/* the js function */
ShowHideDiv={
init:function(){
var radcheck = $(".slide");
//if the input element has the class 'slide' then the value of it's 'id' attribute
//is retrieved and the class which has the same name as the 'id' of the current input
//element is hidden or slided into view - in this case the 'viaMail' class
radcheck.on("change",function(){
if($(this).prop('checked')== true) {
$('body').find("."+$(this).attr('id')).slideDown('slow');
}
else {
$('body').find("."+$(this).attr('id')).slideUp('fast');
}
});
}
}
我已经尝试了复选框的功能,它工作正常。 It doesn't work for the radio buttons - the div is 'slided down' into view but it doesn't disappear by 'slideUp' when the other radio button is selected.非常感谢您的帮助。