最近的项目中用到了好几次单选按钮和复选框,原来做项目也需要的,现在想把这类经常用的方法整合下,写在一个对象里,以后用直接传参调用就可以了,内容全部是js,减少工程的负担吧,目前还在修改中,望多多指教。。。
//定义ToolClass对象,里面定义参数param1,param2,这个两个参数是页面中的需要处理的id值
var ToolsCalss = function(param1,param2){
this.param1 = param1;
this.param2 = param2;
};
//在ToolClass中定义方法
ToolsCalss.prototype = {
//getCheckObject方法是type="radio" 点击事件操作:选中的数据
getCheckObject:function(){
var chkObjs = document.getElementsByName(this.param1);
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
chk = i;
alert(chkObjs[i].value);
break;
}
(function(n){
chkObjs[n].onclick = function () {
document.getElementById("refund").style.background="salmon" ;//更改背景颜色
};
})(i);
}
},
// getCheckBoxObj方法是type="checkbox" 复选框操作:全部选中
getCheckBoxObj:function(){
var allchk = document.getElementById(this.param1);
var nodeElement = document.getElementsByName(this.param2);
if(allchk.checked){
for(i=0;i<nodeElement.length;i++){
nodeElement[i].checked = true;
}
}else{
for(i=0;i<nodeElement.length;i++){
nodeElement[i].checked = false;
}
//this.checked = false;
}
},
//getClickObj方法是type="checkbox" 复选框操作:选中的数据
getClickObj:function(){
var allchk = document.getElementById(this.param1);
var nodeElement = document.getElementsByName(this.param2);
for(i=0;i<nodeElement.length;i++){
if(nodeElement[i].checked){
alert(nodeElement[i].value);
}
}
}
};
下面是测试举例:
window.οnlοad=function (){
//测试单选按钮
var tl = new ToolsCalss("cause",'');
tl.getCheckObject();
};
//全选事件
function allchk(){
var tl = new ToolsCalss("allCheck",'ball');
tl.getCheckBoxObj();
}
//测试选中数据事件
function dataClick(){
var tl = new ToolsCalss("allCheck",'ball');
tl.getClickObj();
var pass = hex_md5(hex_md5('1234qwer')+'1430365165709');
console.log('密码'+pass);
}
HTML部分代码:
1.复选框的操作
<input type="checkbox" value="basketball" name="ball">篮球
<input type="checkbox" value="goftball" name="ball">高夫
<input type="checkbox" value="paiball" name="ball">排球
<input type="checkbox" value="football" name="ball">足球
<input type="checkbox" value="全选" name="all" id="allCheck" οnclick="allchk()">全选
<input type="button" value="选中的数据" οnclick="dataClick()" />
2.单选按钮
<ul>
<li ><span >测试数据1 </span><span style="float:right;padding-right: 10px;"><input type="radio" value="其他1" name="cause"/></span></li>
<li ><span >测试数据2</span><span style="float:right;padding-right: 10px;"><input type="radio" value="其他2" name="cause"/></span></li>
<li ><span >测试数据3</span><span style="float:right;padding-right: 10px;"><input type="radio" value="其他3" name="cause"/></span></li>
<li ><span >其他</span><span style="float:right;padding-right: 10px;"><input type="radio" value="其他" name="cause"/></span></li>
</ul>
<a href="javascript:submit_reason()">变 色 按 钮</a>
实例下载地址 http://download.csdn.net/download/zzqw199012/8660401