I have a form that finds lost and found items.
-----------------------------------------------------------------
HTML
<div id="myRadioGroup">
<input type="radio" name="subcatitemlost" value="Div1" /> Luggage
<div id="Div1" class="desc">
<label>
<input type="radio" name="subluggage" id="truck" value="trunk"/>
</label>Trunk</br>
<label>
<input type="radio" name="subluggage" id="chest" value="chest"/>
</label>Chest</br>
<label>
<input type="radio" name="subluggage" id="suitcase" value="suitcase"/>
</label>Suitcase</br>
<label>
<input type="radio" name="subluggage" id="duffelbag" value="duffelbag"/>
</label>Duffelbag</br>
<label>
<input type="radio" name="subluggage" id="tote" value="tote"/>
</label>Tote</br>
</div> <br/>
<input type="radio" name="subcatitemlost" value="Div2" />Clothing
<div id="Div2" class="desc">
<input type="radio" name="subclothing" id="shirt" value="shirt"/>
</label>Shirt</br>
<input type="radio" name="subclothing" id="shoes" value="shoes"/>
</label>Shoes</br>
<input type="radio" name="subclothing" id="pants" value="pants"/>
</label>Pants</br>
<input type="radio" name="subclothing" id="jacket" value="jacket"/>
</label>Jacket</br>
<input type="radio" name="subclothing" id="suit" value="suit"/>
</label>Suit</br>
<input type="radio" name="subclothing" id="hat" value="hat"/>
</label>Hat</br>
</div><br />
-----------------------------------------------------------------
The main categories will unselect themselves upon selection of another main category , however , the subcategories will remain selected and I cannot figure how to control that.
Here is the jQuery script:
-----------------------------------------------------------------
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
-----------------------------------------------------------------
HTML
<div id="myRadioGroup">
<input type="radio" name="subcatitemlost" value="Div1" /> Luggage
<div id="Div1" class="desc">
<label>
<input type="radio" name="subluggage" id="truck" value="trunk"/>
</label>Trunk</br>
<label>
<input type="radio" name="subluggage" id="chest" value="chest"/>
</label>Chest</br>
<label>
<input type="radio" name="subluggage" id="suitcase" value="suitcase"/>
</label>Suitcase</br>
<label>
<input type="radio" name="subluggage" id="duffelbag" value="duffelbag"/>
</label>Duffelbag</br>
<label>
<input type="radio" name="subluggage" id="tote" value="tote"/>
</label>Tote</br>
</div> <br/>
<input type="radio" name="subcatitemlost" value="Div2" />Clothing
<div id="Div2" class="desc">
<input type="radio" name="subclothing" id="shirt" value="shirt"/>
</label>Shirt</br>
<input type="radio" name="subclothing" id="shoes" value="shoes"/>
</label>Shoes</br>
<input type="radio" name="subclothing" id="pants" value="pants"/>
</label>Pants</br>
<input type="radio" name="subclothing" id="jacket" value="jacket"/>
</label>Jacket</br>
<input type="radio" name="subclothing" id="suit" value="suit"/>
</label>Suit</br>
<input type="radio" name="subclothing" id="hat" value="hat"/>
</label>Hat</br>
</div><br />
-----------------------------------------------------------------
The main categories will unselect themselves upon selection of another main category , however , the subcategories will remain selected and I cannot figure how to control that.
Here is the jQuery script:
-----------------------------------------------------------------
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});