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的应用就讲到这里吧!
checkbox 与JS的应用的更多相关文章
- radio和checkbox的js勾选使用
Html: <table> <tr><th class="w1">党内职务</th><td colspan="3&q ...
- 实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中
上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs&q ...
- JS中级 - 02:表单、表格
getElementsByTagName() getElementsByTagName() 方法可返回带有指定标签名的对象的集合. getElementsByClassName() 返回文档中所有指定 ...
- jquery插件开发(checkbox全选的简单实例)
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 带CheckBox的TreeView网上出错问题解决办法
问题描述:TreeView上传到服务器,预览效果发现节点图片不显示.展开合并功能缺失.解决办法: 以下是我个人的解决办法,最终的效果实现了,但是还有一点点小遗憾,就是页面上有基于微软的调用js的报错信 ...
- checkbox 全选效果
html部分 <p id="all">全选</p> <input type="checkbox" /><br/> ...
- 2、弹出窗口 Alert
1.只是弹出框 /* --- page1.html ---*/ <ion-navbar *navbar> <ion-title>Tab 1</ion-title> ...
- js 输入框增加删除操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery
使用时jquery先引进jquery文件包 <script src="jquery-1.11.2.min.js"></script> 一个页面有多个文件jq ...
随机推荐
- Nginx优化—配置优化
完整配置如下所示: user nginx; #运行的用户 pid /var/run/nginx.pid; worker_processes auto; #定义了nginx对外提供web服务时的word ...
- css09浮动属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Linux中命令行编译java接口总是提示找不到符号的疑难杂症的解决
今天学习java的接口,在linux的命令行下写代码练练手吧,啪啪啪一顿猛敲,写了一个接口UsbInserface,UDisk继承UsbInterface,写完了那就编译到bin目录呗. 当时写程序的 ...
- IE8兼容placeholder的方案
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...
- Spring 3.0就这么简单读书笔记
一般情况下,spring容器中的大部分Bean都是单实例的,所以一般无须通过@Repository.@Service.@Component等注解的value属性为Bean指定名称,也无须使用@Qual ...
- linux jdk,java ee ,tomcat 安装配置
1.把mypagekage.iso 挂载到linux操作系统中. 在VM做好配置,使用 mount /mnt/cdrom 2.把安装文件拷贝到/home cp 文件名 /home (快捷键tab) 3 ...
- Android中的动画
Android中的动画分为: 1.逐帧动画(Frame Animation): 把动画过程的每张静态图片都收集起来,然后由Android来控制依次显示这些静态图片,然后利用人眼”视觉暂留“的原理,给 ...
- jdk与cglib的动态代理
JDK动态代理中包含一个类和一个接口: InvocationHandler接口: public interface InvocationHandler { public Object invoke(O ...
- mongodb安装服务
一.准备工作 1:下载: http://www.mongodb.org/downloads 2:解压到ZIP到 D:\Mongodb ,在此目录下再建立2个目录 D:\Mongodb\db和D ...
- Android应用----如何让应用全屏
一般Android的应用启动时都有欢迎界面,类似QQHD启动那样.比较大方绚丽.心动不如行动,有时间自己也来实现类似的效果,嘿嘿. 观察发现QQHD的欢迎界面是全屏的,这个好办.下面就Andro ...