您的位置:首页 > Web前端 > JavaScript

checkbox 实现单选

2016-09-12 14:39 197 查看
要做一个用checkbox打分的功能 , 打分项和分值都是通过枚举配置的,前台用EL表达式 循环出来

效果:



jsp:

<script type="text/javascript">
//校验必须要打分
function checkqualitygrade(){
var flag =true;
var _gradesnodes = $("input[id ^= 'hiddenqgitem_']");
//先清空
$.each(_gradesnodes, function(_i, _el){
_el.value ='';
});
//再赋值
var gradesnodes = $("input[id ^= 'qgitem_']");
$.each(gradesnodes, function(i, el){
var obj = document.getElementsByName('hidden'+el.id);
if(el.checked){
$(obj).stk_val(el.value);
}
});
//校验
$.each(_gradesnodes, function(_i, _el){
if( _el.value ==null || _el.value =='')
flag =false;
});
return flag;
}
function clickCheckBox(element){
var elementName = $(element).attr("name");
var obj = document.getElementsByName(elementName);
for (i=0; i<obj.length; i++){
if (obj[i]!=element ){
obj[i].checked = false;
}
else  obj[i].checked = element.checked;
//      else obj[i].checked = true;
}
}
</script>
<div style="margin-top:10px;margin-bottom: 10px">
<table width='800px' class='stk-table stk-table-bbline'>
<tr>
<th colspan="3" class='stk-table-th' style='text-align: left'>Quality Grade</th>
</tr>
<tr>
<td class="stk-table-td alignC"></td>
<td class="stk-table-td alignC" style="font-weight: bold;"> Grade Item</td>
<td class="stk-table-td alignC" style="font-weight: bold;"> Score Value</td>
</tr>
<c:forEach items="${qualitygradeitems}" var="items" varStatus="i">
<tr>
<td class="stk-table-td alignC">${i.index+1}</td>
<td class="stk-table-td alignL"> ${items.name}</td>
<td class="stk-table-td alignC">
<c:set var="key" value="G_${empid}_${items.value}" scope="page"/>
<c:forEach items="${qualitygradevalues}" var="values" >
<label>${values.name}
<input name="qgitem_${empid}_${items.value}_value" id="qgitem_${empid}_${items.value}_value"
type="checkbox" value="${values.value}" onclick="clickCheckBox(this)"
${(values.value eq grademap[key]) ? 'checked' : ''} /></label>
     
</c:forEach>
4000
<input type="hidden" name="hiddenqgitem_${empid}_${items.value}_value" id="hiddenqgitem_${empid}_${items.value}_value" />
</td>
</tr>
</c:forEach>

</table>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  checkbox jsp