How to create li checkbox using jquery

Question

I am trying to select individual selection and in hidden a input checkbox in an un-ordered list.

Issue: When I click on one it selects all instead of one I need just like checkbox in list with hidden input checkbox here is my code shared in jsFiddle

<ul class="checkbox_list">
    <li>
        ravi
        <p>2343534656 - U44BB387587</p>
        <input type="checkbox" class="input_class_checkbox" id="c1">
    </li>
    <li>
        arvi
        <p>2343534656 - U444BB387587</p>
        <input type="checkbox" class="input_class_checkbox" id="c2">
    </li>
    <li>
        jiva
        <p>2343534656 - 444BB387587</p>
        <input type="checkbox" class="input_class_checkbox" id="c3">
    </li>
</ul>

Milind Anantwar · Accepted Answer · 2016-06-21 10:26:50Z

2

You need to use clicked element context this to target correct element:

$('.checkbox_list li').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
});

Working Demo

answered Jun 21, 2016 at 10:26

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Divya Sharma Over a year ago

not only the class "checked" in ".checkbox_list li", i want to add the class "checked" in class="class_checkbox"

Milind Anantwar Over a year ago

@DivyaSharma: $(this).find('.input_class_checkbox').addClass('checked')

Collectives™ on Stack Overflow

How to create li checkbox using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related