Javascript 创建后动态检查单选按钮
我在应用程序中遇到的问题是,当我加载以下网页时,只检查最后一个单选按钮集,而我希望检查所有单选按钮集Javascript 创建后动态检查单选按钮,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我在应用程序中遇到的问题是,当我加载以下网页时,只检查最后一个单选按钮集,而我希望检查所有单选按钮集 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'>
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');
用于(var i=0;i此处的工作演示
首先,您需要将单选按钮属性更改为“选中”,然后将UI更改为选中的UI。否则,即使选中复选框,UI也不会更改
您可以选中/取消选中并查看选中的值
HTML
在这里工作
首先,您需要将单选按钮属性更改为“选中”,然后将UI更改为选中的UI。否则,即使选中复选框,UI也不会更改
您可以选中/取消选中并查看选中的值
HTML
仅供参考,您应该只将id
s分配给一个元素。如果您希望将相同的id
分配给多个元素,请使用一个类。单选按钮的工作方式是,如果它们具有相同的名称,就不能全部检查它们。$('[type=radio]')。每个(函数(){$(this.prop('checked',true.)。checkboxradio('refresh');});
这将遍历所有单选按钮并检查它们。但是,每个组中只有一个单选按钮将被检查。单选按钮的行为是,在同一组(相同的属性名称)中只能检查一个单选按钮。因此,您想使用复选框或取消单选按钮分组您可以发布最终的HTML结果吗?基本上我想看到javascript HTML输出。仅供参考,您应该只将id
s分配给一个元素。如果您想将相同的id
分配给多个元素,请使用类。单选按钮的工作方式是如果名称相同,则无法全部检查。$('[type=radio]')。每个(函数(){$(this).prop('checked',true.);checkboxradio('refresh');});
这将遍历所有单选按钮并检查它们。但是,每个组中只有一个单选按钮将被检查。单选按钮的行为是,在同一组中只能检查一个单选按钮(相同的attr名称)。那么,您想使用复选框或者取消收音机按钮的分组来发布最终的HTML结果吗?基本上我想看到javascript 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>
$(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');
});