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 行の.hide()and .show()?を含む 50 の 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 に答える