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

上一篇:Oracle表空间操作


下一篇:Linux系统zookeeper环境搭建(单机、伪分布式、分布式)