创建后动态检查单选按钮

时间:2013-06-05 14:39:44

标签: javascript jquery html jquery-mobile

我在我的应用程序中遇到的问题是,当我加载以下网页时,只检查了最后一个radiobutton集,而我希望所有这些都被检查。

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

如果我在for循环内部触发,一切正常,但需要更多时间(如果我将触发器置于循环之外,则需要大约100秒对10秒)。 我该如何解决?

1 个答案:

答案 0 :(得分:1)

在这里工作DEMO,http://jsfiddle.net/yeyene/dzckn/

首先,您需要将单选按钮属性更改为“已选中”,然后将UI更改为已检查的UI。否则,即使选中了复选框,UI也不会更改。

您可以选中/取消选中并查看选中的值。

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