Question

I have this list of li's that have a check-box that goes with it. I'm trying to have the check-box checked toggled when the li is clicked. Im trying to get it to use the "this" key word so that only the checkbox in the li that is clicked gets checked but cant figure it out. Here is my code.

<form method="get">
    <ul>
         <li class="check"> <input type="checkbox" name="cause1" value="cause1" class="cause1">check 1</li> 
         <li class="check"> <input type="checkbox" name="cause3" value="cause3" class="cause2"> check 2</li> 
         <li class="check"> <input type="checkbox" name="cause4" value="cause4" class="cause3">check 3</li> 
         <li class="check"> <input type="checkbox" name="cause5" value="cause5" class="cause4"> check 4</li>               
         <li class="check"> <input type="checkbox" name="cause6" value="cause6" class="cause5"> check 5</li> 
    </ul>
</form>

        <script>
            $(document).ready(function () {
                $('.check').click(function () {
                    $(this).each(function () { 
                        if (this.checked = false;) {
                            $(this).checked = true;
                        } else {
                            $(this).checked = false;
                        }
                    });
                });
            });

        </script>
Was it helpful?

Solution

Try

jQuery(function ($) {
    $('.check').click(function (e) {
        //ignore the click on the input element else the default behavior and manual toggle will negate each other
        if (e.target.tagName != 'INPUT') {
            $(this).find('input').prop('checked', function (i, checked) {
                return !checked
            });
        }
    });
});

Demo: Fiddle

OTHER TIPS

Your if statements are set up wrong, you've got assignment operators in there and also a semicolon. Also try using the this selector and attr() instead as well.

if( !( $(this).attr('checked') ) ){
    $(this).attr('checked', 'checked');
}

I always use attr() for checking and assigning checkbox values as well.

Try this

$('.check').click(function () {
   if($(this).find('input').is(':checked'))
       $(this).find('input').prop('checked',false);
   else
       $(this).find('input').prop('checked',true);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top