CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Riccardo Cestari
Riccardo Cestari

Reputation: 113

Dynamically check radio-button after creation

the problem I have in my application is that when I load the following webpage, only the last radiobutton set is checked, while I want all of them checked.

    for(var i=0; i<results.rows.length; i++){
    if(results.rows.item(i).qst_status==0)      //OK
        var x="<fieldset data-role='controlgroup' data-inline='true' data-type='horizontal'><input type='radio' name='radio-choice' id='radio-choice-1' value='OK' checked='checked' onclick='okpressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-1' style='width: 100px;'><img src='images/ok.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-2' value='KO' onclick='kopressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-2' style='width: 100px;'><img src='images/ko.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-3' value='NA' onclick='napressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-3' style='width: 100px; height:43px;'>N.A.</label></fieldset>";
    else if(results.rows.item(i).qst_status==1) //KO
        var x="<fieldset data-role='controlgroup' data-inline='true' data-type='horizontal'><input type='radio' name='radio-choice' id='radio-choice-1' value='OK' onclick='okpressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-1' style='width: 100px;'><img src='images/ok.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-2' value='KO' checked='checked' onclick='kopressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-2' style='width: 100px;'><img src='images/ko.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-3' value='NA' onclick='napressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-3' style='width: 100px; height:43px;'>N.A.</label></fieldset>";
    else if(results.rows.item(i).qst_status==2) //NA
        var x="<fieldset data-role='controlgroup' data-inline='true' data-type='horizontal'><input type='radio' name='radio-choice' id='radio-choice-1' value='OK' onclick='okpressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-1' style='width: 100px;'><img src='images/ok.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-2' value='KO' onclick='kopressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-2' style='width: 100px;'><img src='images/ko.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-3' value='NA' checked='checked' onclick='napressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-3' style='width: 100px; height:43px;'>N.A.</label></fieldset>";
    else                                        //Audit not completed
        var x="<fieldset data-role='controlgroup' data-inline='true' data-type='horizontal'><input type='radio' name='radio-choice' id='radio-choice-1' value='OK' onclick='okpressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-1' style='width: 100px;'><img src='images/ok.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-2' value='KO' onclick='kopressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-2' style='width: 100px;'><img src='images/ko.png'></img></label><input type='radio' name='radio-choice' id='radio-choice-3' value='NA' onclick='napressed("+results.rows.item(i).qst_id+");'/><label for='radio-choice-3' style='width: 100px; height:43px;'>N.A.</label></fieldset>";
    if(adt_status=="completed"){            //Audit completed
        if(results.rows.item(i).chk_att==1) //Attachments
            var v="<td width='10%' align='right'><a href='cameraroll.html' rel='external' onclick='updID("+results.rows.item(i).chk_id+");'><img src='images/ico/attach.png'></img></a></td>";
        else                                //No attachments
            var v="<td width='10%'></td>";
    }
    else{                                   //Audit not completed
        if(results.rows.item(i).chk_att==1) //Ci sono allegati
            var v="<td width='10%' align='right'><a href='#mediapopup' data-rel='popup' onclick='updID("+results.rows.item(i).chk_id+");'><img src='images/ico/attach.png'></img></a></td>";
        else                                //No attachments
            var v="<td width='10%' align='right'><a href='#mediapopup_noall' data-rel='popup' onclick='updID("+results.rows.item(i).chk_id+");'><img src='images/ico/attach.png'></img></a></td>";
    }
    t=t+"<tr><td colspan='2' width='90%'><p>"+results.rows.item(i).qst_sent+"</p></td><td width='10%' align='center'><a href='#notepopup' data-role='button' data-icon='info' data-rel='popup' onclick='updNote(\""+results.rows.item(i).qst_help+"\");' data-transition='pop' data-iconpos='notext'></a></td></tr><tr><td width='45%'>"+x+"</td><td width='45%'><textarea style='height:50px; width:100%' id='note' name='note' placeholder='Insert here notes' onchange='checkNote(this.value, "+results.rows.item(i).qst_id+")'>"+results.rows.item(i).qst_note+"</textarea></td>"+v+"</tr><tr><td colspan='3'><hr></td></tr>";
    }
$("#checklisttable").append(t).trigger('create');

If I trigger inside the for cycle, everything is ok but it takes much more time (about 100 seconds against 10 seconds if I put the trigger outside the cycle). How can I solve it?

Upvotes: 1

Views: 234

Answers (1)

yeyene
yeyene

Reputation: 7380

Working DEMO here, http://jsfiddle.net/yeyene/dzckn/

First, you need to change the radio button property to 'checked', then, changed the UI to checked UI. Otherwise, the UI won't change even though the checked box is checked.

You can check/uncheck and see the checked value.

HTML

<form id="checklisttable">
            <fieldset data-role="controlgroup">
                <legend>Vertical:</legend>
                <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
                <label for="checkbox-v-2a">One</label>
                <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
                <label for="checkbox-v-2b">Two</label>
                <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
                <label for="checkbox-v-2c">Three</label>
                <input type="checkbox" name="checkbox-v-2d" id="checkbox-v-2d">
                <label for="checkbox-v-2d">Four</label>
            </fieldset>
        </form>

JQUERY

$(document).ready(function(){

    $("#checklisttable input").each(function(){            
        $(this).prop('checked', true);
    });

    $("#checklisttable label").addClass('ui-checkbox-on').removeClass('ui-checkbox-off');
    $("#checklisttable span.ui-icon").addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off');
});

Upvotes: 1

Related Questions