参考原文: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. 《StackGAN: Text to Photo-realistic Image Synthesis with Stacked GAN》论文笔记

    出处:arxiv 2016 尚未出版 Motivation 根据文字描述来合成相片级真实感的图片是一项极具挑战性的任务.现有的生成手段,往往只能合成大体的目标,而丢失了生动的细节信息.StackGAN ...

  2. 学习笔记::AC自动机

    最先开始以为和自动刷题机是一个东西... 其实就是kmp的一个拓展.学完kmp再学这个就会发现其实不难 1.kmp是一个串匹配一个串,但是当我们想用多个串匹配一个文本的时候,kmp就不行了,因此我们有 ...

  3. 0 Java实现 一篇文章说尽设计模式之六大原则

    我们知道,设计模式很有用,学好设计模式不但能让你写出更简洁,优雅的代码,还能使得代码的结构更清晰,也更有利于扩展 当然设计模式也不是万能的,一成不变的.设计模式只是前人总结出来的一种经验,一种特定问题 ...

  4. Reshapeing operations

    Reshapeing operations Suppose we have the following tensor: t = torch.tensor([ [1,1,1,1], [2,2,2,2], ...

  5. 通过Fiddler监控Java应用发送请求及相应数据

    Fiddler可以很好的监控浏览器发送的各种请求及响应数据,对于JAVA程序默认情况下是无法监控的,但实际需求中需要监控JAVA程序发送HTTP请求及返回数据是否正确. Fiddler默认配置的监听端 ...

  6. python_基础部分(1)

    第1章 Python介绍 1.1 基础介绍 l  代码:代码的出现是为了解决生活中的问题 l  编译解释器:目的是让解释器将代码翻译成计算机可识别的语言 l  编程语言:按照一定规则写出来的语言, C ...

  7. [转]Windows Azure安全概述

    本文转自:http://blogs.msdn.com/b/azchina/archive/2011/03/06/windows_5f00_azure_5f00_security_5f00_overvi ...

  8. Oracle 表-初步涉水不深(第一天)

    oracle 关系型数据库 注释:面对大型数据处理,市场占有率40%多(但是目前正往分布式转换) 故事:本来一台大型计算机才能处理的数据,美国科学家用100台家用电脑连接,成功处理了数据.. tabl ...

  9. 一段js实现复制文本内容到剪切板

    <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementBy ...

  10. 12. binary search Trees

    12. binary search Trees    The search tree data structure supports many dynamic-set operations,inclu ...