Checkbox is not selected when click on the button

Question

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

Make the js fiddle that will help to give the answer for you — Thirumalai murugan
– Thirumalai murugan, Commented Jul 22, 2013 at 7:04
hmm..but if i make a fiddle for this i have present the whole thing in the fiddle — Lucky
– Lucky, Commented Jul 22, 2013 at 7:09
Can't understand what you try to say... hope your don't want to show every thing in jsfiddle if its the case try to immediate the problem with some other mock-up otherwise its harder to solve your problem. Try to give the part where your getting the problem avoid unnecessary things — Thirumalai murugan
– Thirumalai murugan, Commented Jul 22, 2013 at 7:15
$("#check").prop("checked", false).checkboxradio('refresh'); — Omar
– Omar, Commented Jul 22, 2013 at 9:10
@Omar when i click on the checkbox suddenly page changes into previous view i mean normal listview(without checkboxes). — Lucky
– Lucky, Commented Jul 22, 2013 at 9:32

Community · Accepted Answer · 2017-05-23 11:49:13Z

1

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.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Jul 22, 2013 at 15:03

user2409138

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

Collectives™ on Stack Overflow

Checkbox is not selected when click on the button

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related