最新消息:

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

JQuery应用 杨红伟 1882浏览 0评论

首先说明: 你可以到 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/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/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/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

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址