Show/hide 1-5 input boxes based on quantity selected with radio buttons in jQuery, needs cleanup

I've hacked together something that works flawlessly but it's really ugly code and I want to learn to clean it up.

Does anyone have a better suggestion then this method? I've used some attribute selectors to cut down the repetition, but I still have to a huge block for each hardware (there are 4 right now). I guess I can use a loop with variables for the hardware?

$('input[name="hwA-qty"]').click(function(){
    var selected = $(this).val();
    if (selected == 1) { //Hide inputs 2-5
        $('fieldset[id^="hwA"]').hide(); 
    }
    if (selected == 2) { //Show inputs 1 & 2
        $('fieldset#hwA-2').show();
        $('fieldset#hwA-3').hide();
        $('fieldset#hwA-4').hide();
        $('fieldset#hwA-5').hide();
    }
    if (selected == 3) { //Show inputs 1-3
        $('fieldset#hwA-2').show();
        $('fieldset#hwA-3').show();
        $('fieldset#hwA-4').hide();
        $('fieldset#hwA-5').hide();
    }
    if (selected == 4) { //Show inputs 1-4
        $('fieldset#hwA-2').show();
        $('fieldset#hwA-3').show();
        $('fieldset#hwA-4').show();
        $('fieldset#hwA-5').hide();
    }
    if (selected == 5) { //Show all inputs
        $('fieldset[id^="hwA"]').show();
    }
});
$('input[name="hwB-qty"]').click(function(){
    var selected = $(this).val();
    if (selected == 1) {
        $('fieldset[id^="hwB"]').hide();
    }
    if (selected == 2) {
        $('fieldset#hwB-2').show();
        $('fieldset#hwB-3').hide();
        $('fieldset#hwB-4').hide();
        $('fieldset#hwB-5').hide();
    }
    if (selected == 3) {
        $('fieldset#hdPvr2').show();
        $('fieldset#hdPvr3').show();
        $('fieldset#hdPvr4').hide();
        $('fieldset#hdPvr5').hide();
    }
    if (selected == 4) {
        $('fieldset#hdPvr2').show();
        $('fieldset#hdPvr3').show();
        $('fieldset#hdPvr4').show();
        $('fieldset#hdPvr5').hide();
    }
    if (selected == 5) {
        $('fieldset[id^="sdPvr"]').show();
    }
}); [...]

And here's the html:

[...]
<div class="hardwareValidation">

<div class="select">
    <label for="hwA-qty">Quantity</label><br />
    <label>1 <input type="radio" name="hwA-qty" value="1" checked /></label>
    <label>2 <input type="radio" name="hwA-qty" value="2" /></label>
    <label>3 <input type="radio" name="hwA-qty" value="3" /></label>
    <label>4 <input type="radio" name="hwA-qty" value="4" /></label>
    <label>5 <input type="radio" name="hwA-qty" value="5" /></la开发者_如何学运维bel>
</div>

<fieldset id="hwA-1">
    <div class="input">
        <label for="hwA-1-serial">#1 - Box Serial Number</label><br />
        <input type="text" name="hwA-1-serial" id="hwA-1-serial" />
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="hwA-1-override" value=""> Override Validation
        </label>
    </div>
</fieldset>                     

<fieldset id="hwA-2">
    <div class="input">
        <label for="hwA-2-serial">#2 - Box Serial Number</label><br />
        <input type="text" name="hwA-2-serial" id="hwA-2-serial" />
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="hwA-2-override" value=""> Override Validation
        </label>
    </div>
</fieldset>

</div> [...]

---

$('input[name="hwA-qty"]').click(function(){
var selected = $(this).val();

for(i=1;i<=5;i++){
   if(i<=selected)$('fieldset#hwA-'+i).show();
   else $('fieldset#hwA-'+i).hide();
}

}

---

You could use the nextAll traversing method, that selects the following siblings of the matched elements.

$('input[name="hwA-qty"]').click(function(){
        var selected = $(this).val();
        $("fieldset[id^='hwA-']").show();
        $("#hwA-" + selected).nextAll().hide();
    });

$('input[name="hwA-qty"]:checked').trigger("click"); // Triggers the click event to set to the initial position

See: http://jsfiddle.net/GlauberRocha/s4PAG/1/