参考原文: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绑定的更多相关文章

  1. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  2. chrome下li标签onclick事件无效

    //绑定事件 $(document).ready(function () { $("ul").children().click(function () { clickLi(this ...

  3. 给li标签添加自定义属性

    给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...

  4. Jquery和JS获取ul中li标签(转)

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  6. ul+li标签制作表格

    table标签制作表格代码繁琐,且不方便后期代码维护. li标签加上css的浮动样式可以制作多种样式的表格. 代码如下: <ul id="ttttt" style=" ...

  7. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  8. li标签之间的空隙问题(转)

    原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题   IE6/7的Bug:纵向排列的li中加 ...

  9. js会飞的li标签

    当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

随机推荐

  1. sass 基本语法

    sass语法 文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号. 而本教程 ...

  2. Groupby 方法语法

    对序列进行分类汇总,汇总后产生的序列的key就是按照某个字段汇总的项 .groupby select Viewmodel三者常一起使用,用于统计.groupby 方法语法常与select 子句形成数据 ...

  3. asp.net web.config配置节说明(转发)

    原文地址:http://www.cnblogs.com/qingyuan/articles/1501644.html web.config 文件查找规则:      (1)如果在当前页面所在目录下存在 ...

  4. 【插件开发】—— 8 IPreferenceStore,插件的键/值存储!

    前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭配 6 SWT复杂空间与布局搭配 7 SWT布局详解 ...

  5. 三分钟掌握docker基本指令

    一下内容是我用markdown编辑的,所以排版不是太ok~ # Docker ## 1.核心概念 docker主机(Host):安装了docker程序的机器.docker直接安装再操作系统上. doc ...

  6. HttpSession讲解

    1:session进行身份验证的原理: 当客户端第一次访问服务器的时候,此时客户端的请求中不携带任何标识给服务器,所以此时服务器无法找到与之对应的 session,所以会新建session对象,当服务 ...

  7. 在xampp集成环境下使用 thinkphp 连接oracle

    今天搞了大半天,终于成功了. 1. 首先需要让xampp支持oracle,直接按这个网页上说的做就行.http://nimal.info/blog/2009/activate-oracle-on-xa ...

  8. Python字符串对象常用方法

    安利一句话:字符串是不可变的对象,所以任何操作对原字符串是不改变的! 1.字符串的切割 def split(self, sep=None, maxsplit=-1): # real signature ...

  9. 关于python深度学习网站

      大数据文摘作品,转载要求见文末 编译团队|姚佳灵 裴迅 简介 ▼ 深度学习,是人工智能领域的一个突出的话题,被众人关注已经有相当长的一段时间了.它备受关注是因为在计算机视觉(Computer Vi ...

  10. Apusic中间件结合MyEclipse进行远程调试记录

    Apusic中间件结合MyEclipse进行远程调试记录. 在金蝶域中正常部署应用. 启动金蝶中间件时使用"startapusic -ds"命令. 在MyEclipse的Run-- ...