CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Jay Patel
Jay Patel

Reputation: 1346

Check whether checkbox is selected or not in bootstrap

I am using checked-list-group from here - http://bootsnipp.com/snippets/featured/checked-list-group

I want to check which checkbox is checked and I want to reset all checked items using a button click. I want to do this in Javascript.

I was successful in achieving this with normal bootstrap input tag and Javascript, but somehow I am not able to do it in this code.

<ul id="check-list-box" class="list-group checked-list-box">
    <li class="list-group-item">Permutation</li>
    <li class="list-group-item">Combination</li>
    <li class="list-group-item">Probability</li>                                   
</ul>

 <button class="btn btn-primary" id="get-checked-data" onclick="myfunction()" >Get Checked Data</button>
 <button class="btn btn-primary" id="reset" name="reset_all" >Reset</button>

Here is what I wrote in javascript:

function myfunction()
{

    if(document.getElementById('check-list-box').checked)
    {
        alert("hello-world");    
    }
    else
    {
        alert("not checked");
    }

}
//And something similar for resetting. But I am sure, I am missing something here

Some help will be appreciated.

Upvotes: 1

Views: 1280

Answers (1)

Neeraj Kumar
Neeraj Kumar

Reputation: 1058

This is a masked HTML using bootstrap which seems like a checkbox but its not a checkbox. so your code will never gonna work.

you you have to work in this manner

if($(".checked-list-box li.list-group-item-primary.active").length > 0){
   alert("hello");
} else {
   alert("not checked");
}

What i have written in above code is when you check a checkbox in your above html the li is added with two class "list-group-item-primary active"

So its will be better to get those classes in your li. this will give you whether the checkbox is checked or not.

Upvotes: 1

Related Questions