li标签和checkbox绑定
参考原文:https://www.cnblogs.com/youxin/p/3885496.html
我们经常需要li或span包含一个checkbox,不管点击checkbox或li都会触发相应的事件,如背景色变色。
<ul>
<li><input type="checkbox" name="" id=""/>li1</li>
<li><input type="checkbox" name="" id=""/>li2</li>
<li><input type="checkbox" name="" id=""/>li3</li>
<li><input type="checkbox" name="" id=""/>li4</li>
</ul>
$("ul li").click(function(){
var $input=$(this).find("input");
if($input.prop("checked"))
{
$input.prop("checked",false);
$(this).css("background-color","");
}
else
{
$input.prop("checked",true);
$(this).css("background","red");
}
});
li标签和checkbox绑定的更多相关文章
- jQuery动态添加li标签并添加属性和绑定事件
代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- chrome下li标签onclick事件无效
//绑定事件 $(document).ready(function () { $("ul").children().click(function () { clickLi(this ...
- 给li标签添加自定义属性
给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...
- Jquery和JS获取ul中li标签(转)
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- Jquery和JS获取ul中li标签
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- ul+li标签制作表格
table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...
- li标签行内元素高度及居中
<head> <title><title> <style type="text/css"> * { padding: 0px; ma ...
- li标签之间的空隙问题(转)
原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题 IE6/7的Bug:纵向排列的li中加 ...
- js会飞的li标签
当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
随机推荐
- sass 基本语法
sass语法 文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号. 而本教程 ...
- Groupby 方法语法
对序列进行分类汇总,汇总后产生的序列的key就是按照某个字段汇总的项 .groupby select Viewmodel三者常一起使用,用于统计.groupby 方法语法常与select 子句形成数据 ...
- asp.net web.config配置节说明(转发)
原文地址:http://www.cnblogs.com/qingyuan/articles/1501644.html web.config 文件查找规则: (1)如果在当前页面所在目录下存在 ...
- 【插件开发】—— 8 IPreferenceStore,插件的键/值存储!
前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭配 6 SWT复杂空间与布局搭配 7 SWT布局详解 ...
- 三分钟掌握docker基本指令
一下内容是我用markdown编辑的,所以排版不是太ok~ # Docker ## 1.核心概念 docker主机(Host):安装了docker程序的机器.docker直接安装再操作系统上. doc ...
- HttpSession讲解
1:session进行身份验证的原理: 当客户端第一次访问服务器的时候,此时客户端的请求中不携带任何标识给服务器,所以此时服务器无法找到与之对应的 session,所以会新建session对象,当服务 ...
- 在xampp集成环境下使用 thinkphp 连接oracle
今天搞了大半天,终于成功了. 1. 首先需要让xampp支持oracle,直接按这个网页上说的做就行.http://nimal.info/blog/2009/activate-oracle-on-xa ...
- Python字符串对象常用方法
安利一句话:字符串是不可变的对象,所以任何操作对原字符串是不改变的! 1.字符串的切割 def split(self, sep=None, maxsplit=-1): # real signature ...
- 关于python深度学习网站
大数据文摘作品,转载要求见文末 编译团队|姚佳灵 裴迅 简介 ▼ 深度学习,是人工智能领域的一个突出的话题,被众人关注已经有相当长的一段时间了.它备受关注是因为在计算机视觉(Computer Vi ...
- Apusic中间件结合MyEclipse进行远程调试记录
Apusic中间件结合MyEclipse进行远程调试记录. 在金蝶域中正常部署应用. 启动金蝶中间件时使用"startapusic -ds"命令. 在MyEclipse的Run-- ...