javascript - 如果我的表单的一个 div 可见，那么另一个 div 的值将被重置

Question

我有一个类名为 myForm 的 mysql 查询表单。有一些 div 用于不同的值。 现在，如果我从 class="select_box"中选择 checkbox_one 那么 div.check_area_one 将是 fadeIn(); 之后，

1) 如果我选中复选框 value="one"，则 div_one 将是 fadeIn() 和另一个 fadeOut()；

2) 如果我选中了复选框 value="two"，那么 div_two 将是 fadeIn() 和另一个 fadeOut()；

3) 如果我选中了复选框 value="three"，那么 div_three 将是 fadeIn() 和另一个 fadeOut()；

在选中其中的任何单选按钮后，提交按钮 [在类提交 div 中] 将是 fadeIn(); 同样的事情也会发生在选择选项上 [哪个类是顶部的“select_box”] checkbox_two 或 checkbox_three 但我的问题是，任何人都可以从一开始就在“checkbox_one”中填写所有内容。但是在填写完这些内容之后，在按提交之前，他可以更改他的选择，他可以从中选择checkbox_two首先，我想，如果做这样的事情，之前选择的所有选项将自动重置。 我不知道我能不能做到这一点，请帮助我。如果可能的话，请给我完整的代码。

我的 CSS 和 HTML 示例如下:

CSS:

<style type="text/css">
.check_area_one, .check_area_two, .check_area_three {display:none;}
.div_one, div_two, div_three{display:none;}
</style>

HTML:

<form action="" class="myForm">
<select class="select_box" name="check_select" id="">
 <option value="checkbox_one">checkbox_one</option>
 <option value="checkbox_two">checkbox_two</option>
 <option value="checkbox_three">checkbox_three</option>
</select>
<div class="check_area_one"> <!--first one -->
    <div class="checkbox_one">
    <input type="checkbox" value="One"/> One
    <input type="checkbox" value="Two"/> Two
    <input type="checkbox" value="Three"/> Three
    </div>
        <div class="div_one">
            <input type="radio" value="mango"/> Mango
            <input type="radio" value="apple"/> Apple
            <input type="radio" value="banana"/> Banana
        </div>

        <div class="div_two">
            <input type="radio" value="fish"/> Fish
            <input type="radio" value="rice"/> Rice
            <input type="radio" value="beef"/> Beef
        </div>

        <div class="div_three">
            <input type="radio" value="football"/> Football
            <input type="radio" value="cricket"/> Cricket
            <input type="radio" value="basketball"/> Basketball
        </div>
        <div class="submit">        
            <input type="submit" value="submit" />
        </div>
</div>
<div class="check_area_two"> <!--second one-->
    <div class="checkbox_two">
    <input type="checkbox" value="One"/> One
    <input type="checkbox" value="Two"/> Two
    <input type="checkbox" value="Three"/> Three
    </div>
        <div class="div_one">
            <input type="radio" value="mango2"/> Mango2
            <input type="radio" value="apple2"/> Apple2
            <input type="radio" value="banana2"/> Banana2
        </div>

        <div class="div_two">
            <input type="radio" value="fish2"/> Fish2
            <input type="radio" value="rice2"/> Rice2
            <input type="radio" value="beef2"/> Beef2
        </div>

        <div class="div_three">
            <input type="radio" value="football2"/> Football2
            <input type="radio" value="cricket2"/> Cricket2
            <input type="radio" value="basketball2"/> Basketball2
        </div>
        <div class="submit">        
            <input type="submit" value="submit" />
        </div>
</div>
<div class="check_area_three"> <!--third one-->
    <div class="checkbox_one">
    <input type="checkbox" value="One"/> One
    <input type="checkbox" value="Two"/> Two
    <input type="checkbox" value="Three"/> Three
    </div>
        <div class="div_one">
            <input type="radio" value="mango3"/> Mango3
            <input type="radio" value="apple3"/> Apple3
            <input type="radio" value="banana3"/> Banana3
        </div>

        <div class="div_two">
            <input type="radio" value="fish3"/> Fish3
            <input type="radio" value="rice3"/> Rice3
            <input type="radio" value="beef3"/> Beef3
        </div>

        <div class="div_three">
            <input type="radio" value="football3"/> Football3
            <input type="radio" value="cricket3"/> Cricket3
            <input type="radio" value="basketball3"/> Basketball3
        </div>
                <div class="submit">        
            <input type="submit" value="submit" />
        </div>
</div>
</form>

Answer 1

这可能对你有帮助。

<script>
$('.select_box').change(function()
{
    if(this.value == 'checkbox_one')
    {
        $('.check_area_one').css('display', 'block');
        $('.check_area_two').css('display', 'none');
        $('.check_area_three').css('display', 'none');

        jQuery(".check_area_two, .check_area_three").find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'text':
                case 'textarea':
                case 'file':
                case 'select-one':
                case 'select-multiple':
                    jQuery(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }

    if(this.value == 'checkbox_two')
    {
        $('.check_area_two').css('display', 'block');
        $('.check_area_one').css('display', 'none');
        $('.check_area_three').css('display', 'none');

        jQuery(".check_area_one, .check_area_three").find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'text':
                case 'textarea':
                case 'file':
                case 'select-one':
                case 'select-multiple':
                    jQuery(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }

    if(this.value == 'checkbox_three')
    {
        $('.check_area_three').css('display', 'block');
        $('.check_area_one').css('display', 'none');
        $('.check_area_two').css('display', 'none');

        jQuery(".check_area_one, .check_area_two").find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'text':
                case 'textarea':
                case 'file':
                case 'select-one':
                case 'select-multiple':
                    jQuery(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }
});

Fiddle