带有 next() 或 eq() 的选定复选框旁边的 jQuery 反馈答案

【问题标题】：jQuery feedback next to selected checkboxes with next() or eq()带有 next() 或 eq() 的选定复选框旁边的 jQuery 反馈
【发布时间】：2013-02-25 15:04:50
【问题描述】：

我有几个复选框。当一个复选框被选中时，在该复选框旁边应该会出现一个带有消息的 div（一个带有 .feedback 类的 div）。这有效，使用 next()。但是当在选中“选中”复选框（包括第一个）旁边选择了两个或三个复选框时，应显示一个按钮。当再次取消选中复选框时，该复选框旁边的按钮应该会再次消失。当只剩下一个时，该消息应该会再次出现。

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

JSBIN 可以在这里找到：http://jsbin.com/egutaj/1/edit

【问题讨论】：

显示的 html 中没有 class="button"。为什么一个表单中有这么多提交输入？ jsfiddle.net 中的演示会有所帮助
我的错，由于反复试验。我添加了一个指向 JSBin 的链接。如您所见，输入没有出现。
$(this).eq(0)('input').show(); ..syntax is wrong(missing dot) 但更重要的是this 只是一个元素，所以eq() 没有意义，也没有遍历方法来匹配this 的输入.用有问题的文字准确地解释您期望的行为是什么。此外，使用浏览器控制台查看错误。
谢谢，我至少现在明白为什么 eq 不起作用了。现在已经解决了jsbin.com/egutaj/6谢谢你的帮助。

标签： javascript jquery forms checkbox next

【解决方案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 );

现场演示here

【讨论】：

感谢这项工作，但在 reslity 复选框彼此远离。这就是为什么我想在每个选中的复选框旁边都有一个按钮。但我在那里失败了。
非常感谢！我看到你在这里做了什么。 :) 我接受并投了赞成票！

【解决方案2】：

您需要使用 jQuery.each () 函数来遍历复选框，根据需要显示或隐藏其兄弟。

【讨论】：

感谢您的回答。我已经玩了将近一个小时，但我无法让按钮出现。请看一下我的 JSBIN：jsbin.com/egutaj/1/edit