checkbox 与JS的应用

 

JS是一种基于(面向)对象的语言。所有的东西都基本上是对象。

基于对象和面向对象概念上基本上没有什么区别。

js没有类，它把类功能称为原型对象。是同一个概念。主要是因为js没有class关键字。类==原型对象。

js对象的属性可以动态的添加，是动态语言的表现。

 

废话不多说：

首先为checkbox 添加全选，全不选功能，然后需要把用户点到的checkbox记录下来，并且把复选框的VALUE值传送给php控制器，但是怎样才能获取这些checkbox里面的值呢？

 

全选：<input id="checkAll" type="checkbox"><br>
<input class="ids" value="skuid" name="checkboxes" type="checkbox">SKUID     
<input class="ids" value="goodsid" name="checkboxes" type="checkbox">商品ID     
<input class="ids" value="eventid" name="checkboxes" type="checkbox">促销ID     
<input class="ids" value="title" name="checkboxes" type="checkbox">标题     
<input class="ids" value="title2" name="checkboxes" type="checkbox">卖点     
<input class="ids" value="start_time" name="checkboxes" type="checkbox">活动开始时间     
<input class="ids" value="end_time" name="checkboxes" type="checkbox">活动结束时间     
<br><input class="ids" value="link" name="checkboxes" type="checkbox">链接     
<input class="ids" value="pic" name="checkboxes" type="checkbox">图片     
<input class="ids" value="marketprice" name="checkboxes" type="checkbox">市场价     
<input class="ids" value="retain1" name="checkboxes" type="checkbox">保留字段1     
<input class="ids" value="retain2" name="checkboxes" type="checkbox">保留字段2     
<input class="ids" value="retain3" name="checkboxes" type="checkbox">保留字段3     
<input type="bottom" id="btn" value="确定"/>

 

 

下面这段代码为checkbox 添加全选，全不选功能：

 

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
$(function() {// 全选，全不选
  $("#checkAll").click(function() {
	  var flag = $(this).attr("checked") === true? true: false;
	  $(".ids").attr("checked", flag);
	  });
	  $(".ids").click(function(){var flag = $(this).attr("checked") === true? true: false;
	 });
 });

</script>

 

 

下面通过这段JS代码获取checkbox 里面的值:

 

<script type="text/javascript">
var num_field = [];                   //定义一个数组
$("#btn").live('click',function(){    //为提交按钮添加一个点击事件
	$("input[name=checkboxes]:checked").each(function(){   //获取复选框name为checkboxes的元素
		if($(this).attr("checked")){                       //设置被选中元素的属性为checked
			num_field.push( ($(this).val()) );             //并把值都放到数组里 
		}									   
	});
   /* for(var i=0;i<num_field.length;i++){
		alert(num_field[i]);
	}*/
})
</script>

下面这段代码为把得到的数据传到php控制中：

 

 

<script type="text/javascript"> 
$("#btn").click(function(){ 
    $.get("url-----------/", //传送url地址
	 {num_filed:num_filed}, //要传送的数据 
	 function(data){ 
	 //alert(data); 
	 if(data==2){ 
	 alert("传送成功"); 
	 }else{
	 alert("请检查，有错误"); 
	 }
	 }); 
});
</script>

好吧！checkbox与js的应用就讲到这里吧！