Показать / скрыть 1-5 полей ввода на основе количества, выбранного с помощью переключателей в jQuery, нуждается в очистке

Question

Я взломал что-то, что работает безупречно, но это действительно уродливый код, и я хочу научиться убирать это.

У кого-нибудь есть лучшее предложение, чем этот метод?Я использовал некоторые селекторы атрибутов, чтобы сократить количество повторений, но мне все еще нужен огромный блок для каждого оборудования (сейчас их 4).Я думаю, что я могу использовать цикл с переменными для оборудования?

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

А вот 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" /></label>
</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> [...]

Answer 1

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

}

Answer 2

Вы можете использовать метод обхода nextAll, который выбирает следующие родственные элементы соответствующих элементов.

$('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

См .: http://jsfiddle.net/GlauberRocha/s4PAG/1/