0

私はいくつかのチェックボックスを持っています。1 つのチェックボックスが選択されると、そのチェックボックスの横に、メッセージを含む div (クラス .feedback を持つ div) が表示されます。これは next() を使用して機能します。ただし、チェックされたチェックボックス (最初のチェックボックスを含む) の隣に 2 つまたは 3 つのチェックボックスが選択されている場合は、ボタンが表示されます。チェックボックスが再びオフになると、そのチェックボックスの横にあるボタンが再び消えるはずです。残りが 1 つになると、メッセージが再び表示されます。

すべてのチェックボックスの横にボタンを表示することはできますが、チェックされたチェックボックスの横には表示できません。

JSBIN はここにあります: http://jsbin.com/egutaj/1/edit

4

2 に答える 2

1

これを試して

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<form action="#" name="form">

<div>
    <input type="checkbox" name="test[]" value="1" class="selectie" />
    <div class="feedback"></div>
    <input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
    <input type="checkbox" name="test[]" value="2" class="selectie" />
    <div class="feedback"></div>
    <input type="submit" class="button" value="Compare" name="submit" style="display:none;"  />
</div>
<div>   
    <input type="checkbox" name="test[]" value="3" class="selectie" />
    <div class="feedback"></div>
    <input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
    <input type="checkbox" name="test[]" value="4" class="selectie" />
    <div class="feedback"></div>
    <input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>   
    <input type="checkbox" name="test[]" value="5" class="selectie" />
    <div class="feedback"></div>
    <input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
</form>
<body>

</body>
</html>

CSS

.feedback
{
    display:none;
    padding:10px;
}
.button
{
    display:block
    padding:10px;
}

jQuery

var countChecked = function()
{
    var n = $('input:checked').length;
    if(n === 0)
    {
        $('.feedback').hide();
        $('.button').hide();
        $('.selectie').removeAttr('disabled');
    }
    else if(n == 1)
    {
        $('.feedback').text("Add 1 or 2 to compare");
        $('.selectie').removeAttr('disabled');
        $('.button').hide();
        $(".selectie").each(function(){
            if($(this).is(':checked'))
            {
                $(this).next('.feedback').show();
            }
            else
            {
                $(this).next('.feedback').hide();
            }
        });
    }
    else if(n >= 2)
    {
        $('.selectie').removeAttr('disabled');
        $('.feedback').hide();  
        $(".selectie").each(function(){
            if($(this).is(':checked'))
            {
                $(this).next('.feedback').next('.button').show();
            }
            else
            {
                $(this).next('.feedback').next('.button').hide();
            }
        });
    }
};
countChecked();
 $( "input[type=checkbox]" ).on( "click", countChecked );

ライブデモはこちら

于 2013-03-10T14:16:37.427 に答える
0

jQuery.each () 関数を使用してチェックボックスを反復処理し、必要に応じて兄弟を表示または非表示にする必要があります。

于 2013-03-10T12:11:11.123 に答える