Search code examples
javascriptjqueryformscheckboxjquery-selectors

jQuery feedback next to selected checkboxes with next() or eq()

I have a couple of checkboxes. When one checkbox is selected, next to that checkbox a div with a message (a div with the class .feedback) should appear. This works, using next(). But when two or three checkboxes are selected next to the checked checkboxes (including the first one) a button should appear. When a checkbox is unchecked again, the button next to that checkbox should disappear again. When only one is left, the message should appear again.

I can either get it to show a button next to all checkboxes, but not next to the checked ones.

JSBIN can be found here: http://jsbin.com/egutaj/1/edit

Solution

  • try this

    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 );

    live demo here