JSP中input内容改变触发onchange事件使用

最新推荐文章于 2023-12-14 15:08:00 发布

u010097777

最新推荐文章于 2023-12-14 15:08:00 发布

阅读量2.6w

点赞数 3

分类专栏： —————jQuery —————ITOO

本文链接：https://blog.youkuaiyun.com/u010097777/article/details/51035175

版权

—————ITOO 同时被 2 个专栏收录

14 篇文章

订阅专栏

—————jQuery

2 篇文章

订阅专栏

本文介绍了如何在JSP中利用input的onchange事件动态调整比例分配。当用户修改平时成绩比例时，期末成绩比例会自动更新以保持总和为100%，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做的一个成绩的比例添加的功能，需求是平时比例和期末比例为100%，而为了减少让用户的思考，让界面更人性化，其实我们可以在输入平时比例时，期末比例自动加载，这时就要使用jsp中input的内容改变需要触发的一个事件：onchange（）。

效果图：

JSP中input定义：

<!-- 添加比例设置表单------>
	<div id="addResultRule" class="easyui-dialog" title="添加成绩比例信息" buttons="#dlg-buttons" style="width:400px;height:310px" data-options="resizable:true,modal:true "  <span style="color:#ff0000;">closed="true"</span>><span style="color:#ff0000;">//否则表单一上来就加载</span>
		<form id="fmResultRule" method="post" novalidate>
			<div class="fitem" style="margin-left: 90px;margin-top:30px">
				<label style="font-size: 14px" >学年:</label> <input class="easyui-combobox" style="height:25px;width:150px" id="schoolcalendarId" name="schoolcalendarId" required="true" data-options="valueField:'id',textField:'termName',url:'getSchoolCalendar' "/><br>
			</div>
            <div class="fitem" style="margin-left: 62px; margin-top:10px">
				<label for="name"  style="font-size: 14px">课程名称:</label> <input class="easyui-combobox" style="height:25px;width:150px" required="true" id="courseId" name="courseId"  data-options="editable:false"  align="center"/><br>
			</div>
			<div class="fitem" style="margin-left: 90px; margin-top:10px">
				<label for="name"  style="font-size: 14px" >教师:</label> <input class="easyui-combobox" style="height:25px;width:150px" id="teacherId" name="teacherId" required="true" data-options="editable:false" align="center"/><br>
			</div>
			
			<div class="fitem" style="margin-left: 36px; margin-top:10px">
				<label for="name" style="font-size: 14px">平时成绩比例:</label>  <input id="dailyResultRule"  οnchange="<span style="font-size:24px;color:#ff0000;">changeRule()</span>" style="height:22px;width:148px" name="dailyResultRule" class="easyui-validatebox" type="text" required="true" /><br>
	        </div>
			<div class="fitem" style="margin-left: 36px; margin-top:10px">
				<label for="name"  style="font-size: 14px">期末成绩比例:</label> <input id="finalResultRule" style="height:22px;width:148px"<span style="color:#ff0000;"> readonly="true"</span> name="finalResultRule" class="easyui-validatebox" type="text"  >
			</div>
		</form>
	</div>
    <div id="dlg-buttons">
		<a href="javascript:void(1)" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveAdd()" style="margin-left:50px;  width:90px">确认</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#addResultRule').dialog('close')" style="width:90px; margin-left: 70px; margin-right: 70px;">取消</a>
	</div>

JS中函数定义：

/**
 * <span style="font-family: Arial, Helvetica, sans-serif;">显示</span><span style="font-family: Arial, Helvetica, sans-serif;">期末比例</span>
 */
function <span style="font-size:24px;color:#ff0000;">changeRule()</span>{
	
	var dailyResult=eval(document.getElementById('dailyResultRule')).value ;//获得dailyResultRule控件的值
	 var   r   = /^[0-9]*[1-9][0-9]*$/; 
	 if (r.test(dailyResult) == false) {
	  alert("请输入100以内的正整数！")
	  return false;
	 } else{
		 if(Number(dailyResult)>100){
			 alert("百分比不能大于100！")
			 return false;
		 }
	 }  	
	var dailyRate = dailyResult + "%";//平时比例
	document.getElementById('dailyResultRule').value=dailyRate;//平时比例赋值给dailyResultRule控件
	var finalResultRate=eval(100-Number(dailyResult));//计算期末比例
	var finalRate=finalResultRate+ "%";//期末比例
	document.getElementById('finalResultRule').value=finalRate;//期末比例赋值finalResultRule控件
}