0

我有几个复选框。当一个复选框被选中时，在该复选框旁边应该会出现一个带有消息的 div（一个带有 .feedback 类的 div）。这有效，使用 next()。But when two or three checkboxes are selected next to the checked checkboxes (including the first one) a button should appear. 当再次取消选中复选框时，该复选框旁边的按钮应该会再次消失。当只剩下一个时，该消息应再次出现。

我可以让它在所有复选框旁边显示一个按钮，但不能在选中的复选框旁边显示一个按钮。

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 回答