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的应用就讲到这里吧！