mootools应用：获取复选框中选中的值

这里介绍使用mootools框架来获取复选框中的值

<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），谢谢