CODEWITHSUNDEEP
jqueryhtmllistviewjquery-mobilecheckbox
Lucky
Lucky

Reputation: 425

Checkbox is not selected when click on the button

I'm trying to get a checkbox before the list items in the listview. I have a page with listview when I click on the "edit" button. The listview adding the checkboxes before the list items but when I'm clicking on the checkbox's the page is automatically changes to the previous view (without checkboxes in listview).Checkboxes are not checked.where I'm doing wrong.

$('#fav').on('click', function() {
    $("#favoritesList").listview('refresh');
    fromStorage();

    $(document).on('click', '#empty', function() {
        $("#favoritesList").empty();
        localStorage.clear();
        $("#favoritesList").listview('refresh');
    });


    $(document).on('click', '#edit', function() {
        fromGetStorage();
    });
});

function fromGetStorage() {
    $("#favoritesList").empty();
    $(".ui-listview-filter").remove();
    $("#favoritesList").append('<input type="checkbox" name="all" id="select" />Select all</br>');
    for (var i = 0; i < localStorage.length; i++) {
        var url = localStorage.key(i);
        var demo = localStorage.getItem(url);
        $("#favoritesList").append('<li><div><input type="checkbox" name="check" id="check">&nbsp;<a href="' + url + '" style="text-decoration:none;color:black">' + demo + '</a></div></li>').attr('url', url);
        $("#favoritesList").listview('refresh');
        $('#select').click(function() {
            if ($("#select").is(':checked')) {
                $("#check").prop("checked", true);
            }
            else {
                $("#check").prop("checked", false);
            }

            $("#favoritesList").listview('refresh');
}

Upvotes: 0

Views: 972

Answers (1)

mara-mfa
mara-mfa

Reputation: 895

As Thirumalai said, providing jsfiddle would help a lot.

I think your problem can be event bubbling in combination with how the jquery mobile works. jQuery mobile probably processes the listview and when it finds <a> inside, it automatically considers this as a "link part" of the item. When you click on the checkbox, apart from the checkbox being selected, click handler on the higher level is called as well.

I would try to assing click handler to the checkbox and stop the bubbling of the event (http://api.jquery.com/event.stopPropagation/) so it does not bubble to the higher level and does not open the link.

$("#check").click(function(event){
    event.stopPropagation();
});

If you don't need to stick with your code, I would suggest constructing the html similar way as in this post:

Checkbox in ListView with Jquery mobile

There are jsfiddles as well.

Good luck.

Upvotes: 1

Related Questions