Question

我有一个mysql查询表单，其中的类名是myForm。有一些不同价值的div。现在，如果我从class =“select_box”中选择 checkbox_one ，则div.check_area_one将为fadeIn（）; 之后，

1）如果我选中复选框值=“1”，那么div_one将是fadeIn（）和另一个fadeOut（）;

2）如果我选中复选框值=“2”，那么div_two将是fadeIn（）和另一个fadeOut（）;

3）如果我选中复选框值=“三”，那么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

Answer 2

试一试：对你有帮助

<script>
    $(document).ready(function () {
       $('.select_box').change(function()
        {
            $('.check_area_one,.check_area_two,.check_area_three').hide('1000');
            if(this.value == 'checkbox_one')
            {
                $('.check_area_one').show('1000');            
            }

            if(this.value == 'checkbox_two')
            {
                $('.check_area_two').show('1000');            
            }

            if(this.value == 'checkbox_three')
            {
                $('.check_area_three').show('1000');           
            }

        });
     });
    </script>

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

2 个答案: