JQ应用第7款：jquery的checkbox判断应用

首先说明: 你可以到 https://git.oschina.net/hongweizhiyuan/assets.git 下载相关的js文件，比如本站的 jquery和 layer 文件夹！！当然本例的案例都比较简单，直接查看源代码就可以使用，我就不打包进行下载了。

一：描述

最近在做一个项目，里边涉及到一个模块。就是“若干个checkbox，当选中状态时，单击，弹出提示；当不选中状态，单击，没有任何反应”。但界面还必须好看一些呢！

其实这是一个普遍选择性的问题。下面我们来讲解一下。

二：思路分析

在使用时，我们先进行分解动作！当然我们先要越简单越好，由简入深！在使用过程中相关函数的使用，可以在《jquery1.10在线手册》进行查看！

1、选中checbox相应的id值，这里我们叫 id=books ，将 books 时行单击 click 操作。
$("#books").click
2、在books回调函数进行判断，如果选中状态就 弹出
a> 判断,用if 操作
b> 选中 $("#books").prop(checked)
c> 不选中弹出，加感叹号 !$("#books").prop(checked)
d> 弹出 alert
3、美化弹出框，采用 layer.js 进行弹出美化操作。

三：最简操作方法（步骤1和2）

先看案例 http://www.ijquery.cn/study/demojs/0007-prop/demo1.html

HTML代码：

很简单，一句代码

<input type="checkbox" id="books" checked="checked"/>

JS代码：

上边已经分析了，单击、判断属性、弹出

<script>
	$(function() {
		$("#books").click(function() {
			if (!$("#books").prop("checked")) {
				alert("弹出信息！");
			}
		});
	})
</script>

四：进阶操作（步骤3）

先看案例 http://www.ijquery.cn/study/demojs/0007-prop/demo2.html

开题我们已经说过，这样简单的弹出一个界面，很难看，我们怎么让他变的漂亮一些呢？在这里，我们借助于 layer.js 一款插件，官方网址是 http://sentsin.com/jquery/layer/ 。作者是贤心，他的作品大都非常让人佩服！！起码我是非常佩服的！有兴趣的人可以认真研究一下他的作品。

我们书归正传，来讲一下美化过程，分为两步：

第一步：引入 layer.js 这款插件；

<script src="/assets/layer/layer.js"></script>

第二步：编写代码运行这款插件。

当然了，还有很多其他样式！我只选择了其中一中。相关说明可以去《layer的帮助手册》去查看，网址是 http://sentsin.com/jquery/layer/api.html#method 。我只简要把 alert 的参数，截图下来，以供参考！

<script>
	$(function(){
		$("#books").on('click',function() {
			if (!$("#books").prop("checked")) {
				layer.alert('爱上JQuery', 11,!1);
			}
		});
	})
</script>

以下是1-12所有的图标，

有心的人发现，后边是!1(感叹号1)，它表示呢：没有标题。如果加个标题是这样子的，或者加个回调函数，如图所示：

五：再进阶操作

客户说：我不要关闭按钮，我要加两个按钮，一个确定，一个取消，确定的时候不选 checkbox ，取消的时候选中 checkbox 。以下是详细步骤

1、单击弹出框
2、点击确定，回调函数显示内容：不选中
3、点击取消，回调函数，判断没有选中，则强制选中。

案例地址 http://www.ijquery.cn/study/demojs/0007-prop/demo3.html

以下是代码

$(function(){
	var check_box = $('#books');
	check_box.on('click',function() {
		if (!check_box.prop("checked")) {
			layer.confirm('爱上JQuery',function(index){
				layer.msg('书籍没有被选中！');
				},function(){
				if(!check_box.is(':checked')){
					check_box.prop('checked','true');
				}
			});
		}
	});
})

相关API的说明文档详见 http://sentsin.com/jquery/layer/api.html#method