Question

我有两个复选框是/否。复选框将根据选中的复选框隐藏div。我有一个使用ID为选择器工作的函数，但是我将动态拉入其中的多个，并且需要此函数使用类来选择最接近被单击的复选框的类。

此功能使用ID，但我想使用类：http://jsfiddle.net/infatti/mNQK7/

$('#solutionImplemented1').click(function () {
    // uncheck the other checkbox and hide other content if this is checked
    if (this.checked) {
        $('#solutionImplemented2').attr('checked',false);
        $('#solutionImplementedContent2').hide(this.checked);
    }
    // show correct content
    $('#solutionImplementedContent1').toggle(this.checked);
});
$('#solutionImplemented2').click(function () {
    // uncheck the other checkbox and hide other content if this is checked
    if (this.checked) {
        $('#solutionImplemented1').attr('checked',false);
        $('#solutionImplementedContent1').hide(this.checked);
    }
    // show correct content
    $('#solutionImplementedContent2').toggle(this.checked);
});

这不起作用，但需要使用与点击的复选框相关的选择器：http://jsfiddle.net/infatti/n6gW5/

$('.check-hide-show input:checkbox').click(function () {

    var firstCheckbox = $(this).parent().find('input:checkbox').eq(0);
    var secondCheckbox = $(this).parent().find('input:checkbox').eq(1);
    var checkboxContent1 = $(this).parent().find().nextAll('.check-hide-show-content:gt(0)');
    var checkboxContent2 = $(this).parent().find().nextAll('.check-hide-show-content:gt(1)');

    // uncheck the other checkbox and hide other content if this is checked
    if ($(firstCheckbox).checked) {
        $(secondCheckbox).attr('checked',false);
        $(checkboxContent2).hide();
        $(checkboxContent1).show();
    }

});

如何选择与点击的复选框相关的元素？我在这里做的不是什么？

Answer 1

你会发现这种方法非常难以维护。想象一下，如果你有50个复选框会发生什么; 50个if语句包含50行.hide()和.show()？我建议将每个复选框与其div相关联，可能是通过name=属性。

然后，你可以这样做：

<input type='checkbox' name='check-div1' />
<input type='checkbox' name='check-div2' />
<input type='checkbox' name='check-div3' />

<div class='check-hide-show-content' name='div-div1'> ... </div>
<div class='check-hide-show-content' name='div-div2'> ... </div>
<div class='check-hide-show-content' name='div-div3'> ... </div>

然后，在您的代码中：

$('.check-hide-show input:checkbox').click(function () {
    var divName = $(this).attr("name").substring(6); // Shave "check-" off the start
    var $targetDiv = $("div[name='div-" + divName + "']");
    $("div.check-hide-show-content").hide();
    $targetDiv.show();
});

由于jsFiddle目前对我不利，这里是example on jsBin。请注意，如果同时选中这两个复选框，则只会使用最新选中的复选框。您可以通过添加：

来规避这一点

$(".check-hide-show input[type='checkbox']").not(this).prop("checked", false);

（更新：此处位于jsFiddle。）

如果在页面上选中多个，则隐藏/显示

1 个答案: