<script type="text/javascript" src="http://www.aspbc.com/js/mootools.js"></script> <script type="text/javascript"> //当页面加载完后 window.addEvent('domready',function(){ //获取选中的checkbox的值 $('checkbox2_btn').addEvent('click',function(){ var sel=new Array(); $$('input[name=checkbox2').each(function(item){ if(item.checked==true){ sel.push(item.get('value')); } }); if(sel.length>0) { var main_box = new Element('div', {'class': 'className','id':'aaa','html':sel} ); $('result').adopt(main_box); } else{ alert('至少选择一个国家'); } }); }); </script> <div id="checkbox"> <input name="checkbox2" type="checkbox" id="checkbox1" value="中国" />中国<br /> <input name="checkbox2" type="checkbox" id="checkbox2" value="美国" />美国<br /> <input name="checkbox2" type="checkbox" id="checkbox3" value="英国" />英国<br /> <input name="checkbox2" type="checkbox" id="checkbox4" value="法国" />法国<br /> <input name="checkbox2" type="checkbox" id="checkbox5" value="俄国" />俄国<br /> </div> <input type="button" id="checkbox2_btn" value="查看选中" /> <div style="border:1px solid #f00; width:300px; line-height:30px;" id="result"></div>(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)
这里有几个知识点:
1、页面加载完成后,运行相应的js.
window.addEvent('domready',function(){……});
2、给按纽绑定click事件。
$('checkbox2_btn').addEvent('click',function(){……});
3、定义一个js数组,用来存放选中的复选框的值
var sel=new Array();//定义数组
sel.push(item.get('value'));//将得到的值存入到数组中
4、通过名称来获取dom相关的信息,这里用来获取复选框的value和checked。
$$('input[name=checkbox2').each(function(item){
if(item.checked==true){
sel.push(item.get('value'));
}
});
5、创建一个div层,并将它放到另一个div的最下面
var main_box = new Element('div', {'class': 'className','id':'aaa','html':sel} );
$('result').adopt(main_box);
原创文章,转载请注明来源:asp编程网(www.aspbc.com),谢谢