简体   繁体   中英

Display list of checkboxes with different Values

I have a list of checkboxes with pre-saved values.

I want to display this list to check the checked ones , an uncheck the non-checked ones.

I use JqueryMobile.

function CheckExistingDays(DayId, DaysList, DayName)
        {
            var Len = DaysList.length;
            var FoundLessCounter = 0;
            for(var i =0;i<Len;i++)
             {
                 //alert("Day Id is : "+ DayId+" Day At List is "+ DaysList[i]);
                 if(DayId== DaysList[i])
                 {
                     $("#WeekDays fieldset").append('<input type="checkbox" name="'+ DayName+'" CheckboxId="'+ DayId +'" id="cool'+ i +'" class="custom" checked /><label for="cool'+ i +'">'+ DayName +'</label>');

                 }

                 else
                 {
                     FoundLessCounter++;
                     if(FoundLessCounter == Len)
                     {
                         $("#WeekDays fieldset").append('<input type="checkbox" name="'+ DayName+'" CheckboxId="'+ DayId +'" id="cool'+ i +'" class="custom"/><label for="cool'+ i +'">'+ DayName +'</label>');
                     }

                 }

             }



        }

Where DaysList contains the saved values.

The Checked boxes are correctly displayed but the unchecked boxes are displayed in a worng way : 复选框视图

But one of the days that should be checked is also output with the wrong ones, it just has a right mark beside it.

So, is there a method where I can fix this code ?

The problem was with the "i" counter at the id.

At the Unchecked Days it wasn't incremented correctly, so I just changed this:

                $("#WeekDays fieldset").append('<input type="checkbox" id="cool'+ i +'" class="custom" checked /><label for="cool'+ i +'">'+ DayName +'</label>');

to

               $("#WeekDays fieldset").append('<input type="checkbox" id="cool'+ DayId+'" class="custom" checked /><label for="cool'+ DayId +'">'+ DayName +'</label>');

And everything was fixed when the id was corrected :) `

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM