当前位置:asp编程网>技术教程>Javascript教程>  正文

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

1970-01-01 08:00:00   来源:www.aspbc.com    作者:wangsdong   浏览量:3345   收藏
这里介绍使用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),谢谢



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网