JSFiddle - React, Tailwind, and code Playground

by Suyog

HTML

<form action="" class="myForm" id="configform">
	<select class="select_box" name="check_select" id="check_select">
		<option value="">select </option>
		<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
           ...

CSS

.check_area_one, .check_area_two, .check_area_three {display:none;}
.div_one, div_two, div_three{display:none;}

JavaScript

$('.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;
				}
			});
		}
	});