<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. 检测PC端和移动端的方法总结

    正在苦逼的实习中,昨天公司让做一个页面,涉及到检测终端的问题,如果是手机设备,就跳转到指定的网页上,以前写响应式布局只要用@media screen来实现布局的差异化适应,但是现在不仅仅是布局,还要针 ...

  2. JS原型与原型链终极详解(转)

    JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...

  3. Poj 1013 Counterfeit Dollar / OpenJudge 1013(2692) 假币问题

    1.链接地址: http://poj.org/problem?id=1013 http://bailian.openjudge.cn/practice/2692 http://bailian.open ...

  4. [可拖动DIV]刚开通博客顺便就写了点东西!

    说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...

  5. C#序列化/反序列化

    序列化:将实体类以二进制或者XML的形式保存到磁盘或者内存中. 反序列化:将序列化的二进制文件和XML文件解析成实体类. 例如下面的二进制序列化与反系列化: using System; using S ...

  6. NHibernate多对多关联映射的实现

    上次用EF演示了数据库多对多关系的操作,这次我们还是引用上次的案例,来演示如何在C#当中使用NHibernate. 首先介绍一下NHibernate框架的来源.熟悉Java编程的读者肯定知道Hiber ...

  7. PHP生成订单号(产品号+年的后2位+月+日+订单号)

    require '../common.inc.php'; /* * 产品号+年的后2位+月+日+订单数 * @param [Int] $prodcutId 产品号 * @param [Int] $tr ...

  8. 使用Github总结

    1. 使用Git GUI 首先熟悉一下GUI,如下: 第一步,首先将代码fork到自己的版本库下面,如下: 并获取clone URL,如下图: 然后点击GUI克隆已有版本库,如下图: 点击克隆就可以得 ...

  9. 《C和指针》读书笔记——第二章 基本概念

    1.编译过程: source code→Compiler→Object code→Linker←Lib ↓ Exe 2.经过初始化的静态变量(static)在程序执行前能获得他们的值. 3.绝大多数环 ...

  10. 学会Twitter Bootstrap不再难

    Twitter Bootstrap 3.0 是对其过去的重大改变,现在它更偏向于移动应用的框架,并且宣称是最好的web设计css框架之一,的确如此. 可能有人曾经使用过Twitter Bootstra ...