现在的位置: 首页 > 综合 > 正文

js— 动态加载checkbox的onclick事件

2013年10月10日 ⁄ 综合 ⁄ 共 3302字 ⁄ 字号 评论关闭

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>

 <style type="text/css">
div{
  padding:0px;
  font-size:12px;
}
#mainbox{
  width:234px;
}
#box0{
  width:200px;
  height:20px;
  border:1px solid;
  float:left;
  padding-top:2px;
  padding-left:2px;
  overflow-y:scroll;
}
#box1{
 
  height:20px;
  cursor:pointer;
  border:1px solid;
  float:left;
  text-align:center;
  padding-top:2px;
}
#items{
  border:1px solid black;
  width:203px;
  display:none;
  height:100px;
  overflow-y:scroll;
}
#box3{
  width:118px;
  padding-left:4px;
}
.over{
  font-weight:bold;
  cursor:pointer;
}
p{
  font-size:12px;
  color:activeCaption;
  font-weight:bold;
}
</style> 
  
   <script language="javascript" type="text/javascript">
       function setAttributes() {
           var checkboxList = document.getElementsByTagName("input");
           var objDisplay = document.getElementById("box0");
           for (var i = 0; i < checkboxList.length; i++) {
               if (checkboxList[i].type = "checkbox") {

                   // checkboxList[i].onclick = setValue;

                   checkboxList[i].onclick = function setValue() {
                       var obj = this;
                       if (obj.type == "checkbox" && obj.checked) {

                           if (objDisplay.innerHTML.indexOf(obj.value) < 0) {
                               objDisplay.innerHTML += obj.value;
                           }
                       }
                       else {
                           objDisplay.innerHTML = objDisplay.innerHTML.replace(obj.value, "");
                       }
                   };
               }
           }
          
       }
       function setValue(obj) {
           var objDisplay = document.getElementById("box0");
           if (obj.type == "checkbox" && obj.checked) {
               if (objDisplay.innerHTML.indexOf(obj.value) < 0) {
                   objDisplay.innerHTML += obj.value;
               }
           }
           else {
               objDisplay.innerHTML = objDisplay.innerHTML.replace(obj.value, "");
           }
       }
   </script>
  </head>
  <body onload="setAttributes()">
 
 
  <div id="mainbox">
  <div id="box0"></div><div id="box1">select</div>
<div id="items" style="">
  <table border="0" width="100%" >
<table border="0" width="100%" cellpadding="0" cellspacing="1" >
  <tr>
  <td width="10%"><input value="one" id="test" type=checkbox   /></td>
  <td>one</td> 
  </tr >
  <tr>
  <td><input value="two" id="test" type=checkbox /></td>
  <td>two</td>
  </tr> 
  <tr>
  <td><input value="three" id="test" type=checkbox  /></td>
  <td>three</td> 
  </tr>
  
</table>

</table>
</div>
  </div>
  
  </body>
  <script type="text/javascript">
  var flag=0;
  var oDiv0=document.getElementById("box0");
  var oDiv1=document.getElementById("box1");
  var oDiv=document.getElementById("items");
  oDiv1.onclick=function(){
  if(flag==0){
  oDiv.style.display="block"; 
  flag = 1;
  }
  else{
  flag=0; 
  oDiv.style.display="none"; 
  getCheckedValues();
 }

  } 
  
  oDiv0.onclick=function(){
  if(flag!=0){
  flag=0; 
  oDiv.style.display="none"; 
  getCheckedValues();
 }

  } 
  
  function getCheckedValues(){
  
  var values = document.getElementsByName("test");
  
  var selectValue="";
  
  for(var i=0;i<values.length;i++){
if(values[i].checked){ 
  selectValue += values[i].value +" | ";
}
  } 
  document.getElementById("box0").innerText=selectValue;

alert(document.getElementById("box0").innerText);
  } 
</script>

</html>

抱歉!评论已关闭.