1

我有一个包含大约 40 个复选框和选择（全部由 Web 应用程序代码动态构建）的页面，我想使用以下（工作）jQuery 片段。我不想做的是必须为每个复选框重复此代码等。我不确定解决此问题的最佳方法是什么，因为我不是 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 -->

谢谢！

4

2 回答 2

1

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

我把一些东西放在一起（下面是代码）。它所做的是向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();
    }
});
于 2013-06-01T05:59:10.893 回答
0

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

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

$('input:checkbox')

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

$('.mycheckbox')

Selects 也一样。

$('select')

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

于 2013-06-01T01:22:29.330 回答