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的应用的更多相关文章

  1. radio和checkbox的js勾选使用

    Html: <table> <tr><th class="w1">党内职务</th><td colspan="3&q ...

  2. 实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

    上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs&q ...

  3. JS中级 - 02:表单、表格

    getElementsByTagName() getElementsByTagName() 方法可返回带有指定标签名的对象的集合. getElementsByClassName() 返回文档中所有指定 ...

  4. jquery插件开发(checkbox全选的简单实例)

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. 带CheckBox的TreeView网上出错问题解决办法

    问题描述:TreeView上传到服务器,预览效果发现节点图片不显示.展开合并功能缺失.解决办法: 以下是我个人的解决办法,最终的效果实现了,但是还有一点点小遗憾,就是页面上有基于微软的调用js的报错信 ...

  6. checkbox 全选效果

    html部分 <p id="all">全选</p> <input type="checkbox" /><br/> ...

  7. 2、弹出窗口 Alert

    1.只是弹出框 /* --- page1.html ---*/ <ion-navbar *navbar> <ion-title>Tab 1</ion-title> ...

  8. js 输入框增加删除操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Jquery

    使用时jquery先引进jquery文件包 <script src="jquery-1.11.2.min.js"></script> 一个页面有多个文件jq ...

随机推荐

  1. 怎么在Linux上下载并安装ESET NOD32 Antivirus 4桌面版

    转自:怎么在Linux上下载并安装ESET NOD32 Antivirus 4桌面版 下载并安装ESET NOD32 Antivirus 4的Linux桌面版,根据下面的步骤一步一步的来: I.  下 ...

  2. Python基础----函数

    1.作用域: 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 1==1: name = 'wupeiqi' print name 下面的结论对吗? 外层变量,可以被内 ...

  3. 解决Cacti监控图像断断续续问题

    最近cacti的图像全都是断断续续.新加的设备,图像也是这样,查看cacti 的log发现大量下面类似的错误信息:04/12/2011 03:54:37 PM - SPINE: Poller[0] H ...

  4. Php OpenID

    也许大家都有这样的经历与烦恼:当你为了使用某个网站的服务时(若你还没在该网站上注册过),你不得不先注册一个帐号.当你在一堆的网站上注册帐号后,你必需面临管理这些帐号的烦恼.也许你会这样考虑,不同网站注 ...

  5. 移动端(html5)微信公众号下用keyup实时监控input值的变化无效

    搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...

  6. C# 实现将PDF转文本的功能

    这篇文章最初只描述使用 PDFBox 来解析PDF文件.现在它已经被扩展到包括使用 IFilter 和 iTextSharp 的例程了.  这篇文章和对应的Visual Studio项目已经更新到目前 ...

  7. 《python基础教程》笔记之 字符串

    字符串格式化 字符串格式化使用字符串格式化操作符即百分号%来实现.在%的左侧放置一个字符串(格式化字符串),而在右侧则放置希望格式化的值,可以使用一个值,如一个字符串或者数字,也可以使用多个值的元组或 ...

  8. 利用Cocoapods、SVN 创建私有库实现方案(yoowei)

    由于项目年后要进行组件化,考虑到如果公司内部实现一些私有的组件,不对外公开,而又想在不同项目中使用,该怎么办呢? 使用Cocoapods制作私有库就完美的解决了这个问题.下图就是使用私有库带给我们的好 ...

  9. 最难忘的Bug调试经历

    摘要:目前,著名的社区问答网站Quora上出现一个很火的讨论:你调试过最难的Bug是什么?大家纷纷留言,把自己最痛苦的一次调试经验写下来. 相信每位程序员都有过一段不堪回首地Bug调试经历,程序员一听 ...

  10. recovery编译汉化

    当BoardConfig.mk中定义了recovery的字体且为中文字体时,自动编译为中文版,否则编译为英文版 例如: BOARD_USE_CUSTOM_RECOVERY_FONT := \" ...