参考原文: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. MSTAR MIPS DUMP查找方法

  2. thinkphp不能够将ueditor中的html文本显示

    因为这个问题花费了我好长时间,非常的急躁.fuck!! 这次我首先在富文本框中输入了一些文本,这些文本是带有样式的,比如是代码.然后存入数据库,但是当我再一次将它取出来打算放入富文本框中的时候,马丹, ...

  3. bzoj 1556: 墓地秘密【状压dp+spfa】

    显然是状压,显然不可能把所有格子压起来 仔细观察发现只有机关周围的四个格子有用以及起点,所以我们用spfa处理出这些格子两两之间的距离(注意细节--这里写挂了好几次),然后设f[s][i]为碰完的机关 ...

  4. echarts 实例demo 详细讲解

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     & ...

  5. SpringMVC之HttpMessageConverter

    http://blog.csdn.net/zmx729618/article/details/53034420 HttpMessageConverter接口: T read(Class<? ex ...

  6. python面向对象的3个特点

    封装 封装是从业务逻辑中抽象对象时,要赋予对象相关数据与操作,将一些数据和操作打包在一起的过程.封装是使用对象的主要魅力之一,它提供了一个简单方法来创建复杂方案,解决了世界是如何工作的这一问题,我们自 ...

  7. 3、InputStream

    package com.io.file; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoun ...

  8. static属性

    static 属于全局,也就是类的属性 和方法,换句话说 一个类,不管有多少个实例,却只有一个全局变量 用static修饰的属性和方法称为静态属性和方法 需要注意的是 静态属性和方法属于类方法,加载类 ...

  9. 转如何升级oracle版本?(11.2.0.1至11.2.0.4)

    dbua from 11.2,0.2 to 11.2.0.4 need 2hours 升级结果: 步骤名             日志文件名       状态 升级前操作   PreUpgrade.l ...

  10. 1268 和为K的组合 Meet in mid二分思路

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1268&judgeId=193772 给出n = 20个数,问其是 ...