<input type="checkbox" id="checkbox1"/>

$("input#checkbox1").click(function() {
console.log($(this).attr('checked'));
console.log($(this).prop("checked"));
});

点击checkbox输出:

undefined  
true  
再次点击。
undefined  
false
说明如果没有设置checked,我们就不要用attr("checked")这个属性。
注意:input和#checkbox1中间不要有空格,有空格的话就表示后代了。
 
我们经常需要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>

js如下:

$("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不行。原因在于你勾选后,input.prop("checked")就为真了,这时就又取消掉了。导致你勾选不上。

这么做也不行:

  $("ul li").click(function(){
var $input=$(this).find("input");
var count=1; if(count%2==0)
{
$input.prop("checked",false);
$(this).css("background-color",""); }
else
{
$input.prop("checked",true);
$(this).css("background","red"); }
count++;
});

因为每次点击count都重新赋值。

这里可以用each来在每个li函数定义之前加count:

 $("ul li").each(function(){
var count=1;
$(this).click(function(){
var $input=$(this).find("input");
if(count%2==0)
{
$input.prop("checked",false);
$(this).css("background-color",""); }
else
{
$input.prop("checked",true);
$(this).css("background","red"); }
count++;
});
});
 

input checkbox问题和li里面包含checkbox的更多相关文章

  1. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  2. jquery選取所有checkbox和判斷是否全部checkbox已經被勾選

    前言 勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox 當所有對應checkbox有別勾選的時候, 全部勾選checkbox 也要被勾選 完整程式碼範例 前言 ...

  3. freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式

    今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

  4. li标签和checkbox绑定

    参考原文:https://www.cnblogs.com/youxin/p/3885496.html 我们经常需要li或span包含一个checkbox,不管点击checkbox或li都会触发相应的事 ...

  5. 同上! 下拉复选框 点击当前的checkbox 选中后面li 添加到指定区域

    (function() { $(".cxbtntj").click(function(){ console.log($("#jsLi1").attr(" ...

  6. jquery--获取input checkbox是否被选中以及渲染checkbox选中状态

    jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...

  7. [置顶] android ListView包含Checkbox滑动时状态改变

    题外话: 在xamarin android的开发中基本上所有人都会遇到这个小小的坎,的确有点麻烦,当时我也折腾了好一半天,如果你能看到这篇博客,说明你和我当初也是一样的焦灼,如果你想解决掉这个小小的坎 ...

  8. [WPF 自定义控件]创建包含CheckBox的ListBoxItem

    1. 前言 Xceed wpftoolkit提供了一个CheckListBox,效果如下: 不过它用起来不怎么样,与其这样还不如参考UWP的ListView实现,而且动画效果也很好看: 它的样式如下: ...

  9. 在ASP.NET MVC中验证checkbox 必须选中 (Validation of required checkbox in Asp.Net MVC)

    转载自 http://blog.degree.no/2012/03/validation-of-required-checkbox-in-asp-net-mvc/ Why would you want ...

随机推荐

  1. Decorator设计模式浅谈

    装饰类跟基础组件都实现了目标接口,是为了匹配正确的类型.Java中的IO设计就是典型的Decorator设计模式. 装饰模式产生的初衷是, 对默认实现类的行为进行扩展. 由于装饰类的构造器接受的参数是 ...

  2. Mysql_存储功能

    先上一段代码: -->DELIMETER;     ----加上这一句:DELIMETER的作用是设定客户机的分隔符,表示用//包含的是一段程序,一起执行,而不是见到“:”就执行 结束的时候写上 ...

  3. ios 获取字符串所需要占用的label的高度

    //    设置字体大小 UIFont *fnt=[UIFont systemFontOfSize:16]; NSDictionary *attribute = @{NSFontAttributeNa ...

  4. 关于XML与类型Class的映射

    我们知道数据的持久化是编程必须面对的问题.我们可以保存数据到数据库.Excel表.XML文件.TXT文件等等.那么我们编程中经常会遇到对Xml文件的操作.在http://www.cnblogs.com ...

  5. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

  6. [xUnit]尝试单元测试

    参考: http://xunit.github.io/ http://shouldly.readthedocs.org/en/latest/ 创建测试项目工程,类型选择类库,在NuGet中搜索xuni ...

  7. List分页显示

    //对List集合 数据进行分页  int pageNum = page.getPageNo();// 当前显示第几页 int perPageNum = page.getPageSize(); // ...

  8. [cocos2d-x 2.0.4][iOS7]不能全屏问题

    本篇文章由:http://www.sollyu.com/cocos2d-x-2-0-4-ios7-cannot-be-full-screen-problem/ 说明 ▼ 症状如下图 解决 打开你工程的 ...

  9. KMP的模版实现(以hdu1711为例)

    贴代码,觉得带template的有一些大材小用……不过还是按自己风格写吧! /************************************************************* ...

  10. 细说 ASP.NET Cache 及其高级用法

    许多做过程序性能优化的人,或者关注过程程序性能的人,应该都使用过各类缓存技术. 而我今天所说的Cache是专指ASP.NET的Cache,我们可以使用HttpRuntime.Cache访问到的那个Ca ...