Question

我有一个包含大约40个复选框的页面并选择（所有由Web应用程序代码动态构建）我想使用以下（工作）jQuery for。我不想做的是必须为每个复选框等重复此代码。我不确定最好的方法是什么，因为我不是JavaScript / jQuery专家。

是否有人建议如何重构以下代码以使用任意数量的复选框并选择。目标是查询数据库并构建复选框列表并从中进行选择。

编辑：此代码需要触发单个复选框及其隐藏的选择，而不是所有复选框 - 抱歉，我没有从原始帖子中明确说明：）

$('#ssp_checkbox').change (function() {
    $('#ssp_container').fadeIn();
});

$('#ssp_select').change(function() {
    $('#ssp_addon').fadeIn().html('<i class="icon-ok"></i> ' + $('#ssp_select').val() + ' SSPs Ordered &nbsp;' + '<button type="button" id="ssp_remove" class="btn btn-mini btn-danger">Remove</button>');
    $('#ssp_container').fadeOut();
})

$(document).on('click', '#ssp_remove', function(){
    $('#ssp_select').val('0');
    $('#addons').find('#ssp_addon').fadeOut('slow');
    $('#ssp_checkbox').attr('checked', false);
    countChecked();
})

修改：这是HTML的片段 - 其中大约有40个，并且它们具有不同的ID，但在其他方面是相同的：

<!-- Civil Search / ServCode Prefix: civil / FIELDS: civil_checkbox, civil_select -->
<div class="row-fluid">
    <div class="span12">
        <!-- civil -->
        <label class="checkbox">Civil Search
            <input type="checkbox" class="" name="civil_checkbox" id="civil_checkbox">
        </label>
    </div><!--/Civil Search Span -->
</div><!--/Civil Search Row -->

<!-- Civil Search Select / FIELDS: civil_select -->
<div class="row-fluid addon-select-container" id="civil_select-container">
    <div class="span12">
        <!-- civil_select -->
        <label for="">Number of Services to Add:</label>
        <select class="span2" name="civil_select" id="civil_select">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div><!--/Civil Search Addon Select Span -->
</div><!--/Civil Search Addon Select Row -->

谢谢！

Answer 1

我不确切知道你的代码需要做什么，但我“想”我对你的目标有一个大概的了解。

I threw something together in a fiddle（以下是代码）。它正在做的是向input:checkbox元素添加数据属性，其中div与复选框相关联。然后它触发一个开关来显示/隐藏div标签。这将在无限数量的复选框中运行。

<!-- here are the 40 checkboxes, truncated for brevity -->
<label for="cb1">Check One</label>
<input type="checkbox" name="cb1" id="cb1" data-associated-div="a">

<label for="cb2">Check Two</label>
<input type="checkbox" name="cb2" id="cb2" data-associated-div="b">

<label for="cb3">Check Three</label>
<input type="checkbox" name="cb3" id="cb3" data-associated-div="c">

<!-- pretend these are big, convoluted drop down's -->
<div id="a" class="hidden">alpha</div>
<div id="b" class="hidden">bravo</div>
<div id="c" class="hidden">charlie</div>

$('body').ready(function(){
    // hide all hidden elements by default
    $('.hidden').hide();
});

$('input:checkbox').change(function () {
    // get the target div from the data attribute 'associatedDiv'
    var targetDiv = '#' + $(this).data('associatedDiv');

    // if it's hidden, show it
    if ($(targetDiv).is(":hidden")) {
        $(targetDiv).fadeIn();

    // if it's visible, hide it
    } else {
        $(targetDiv).fadeOut();
    }
});

Answer 2

而不是$('#ssp_checkbox') ...

如果你想要所有的复选框，那么只需选择它们

$('input:checkbox')

或给每个复选框一个类，例如'mycheckbox'并使用它..

$('.mycheckbox')

选择相同。

$('select')

http://api.jquery.com/category/selectors/

如何重构这个重复的jQuery代码

2 个答案: