0

我有 2 个是/否复选框。复选框将根据选中的复选框隐藏一个 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();
    }

});

如何选择与单击的复选框相关的元素？我在这里没有做什么？

4

1 回答 1

0

你会发现这种方法非常难以维护。想象一下如果你有 50 个复选框会发生什么；50 条带有 50 行.hide()和.show()?的 if 语句 我建议将每个复选框链接到它的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 目前不适合我，这里有一个关于 jsBin 的例子。请注意，如果您同时选中两个复选框，它将仅使用最新选中的一个。您可以通过添加以下内容来规避它：

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

（更新：这里是jsFiddle。）

于 2013-02-12T21:10:54.373 回答