input checkbox问题和li里面包含checkbox
<input type="checkbox" id="checkbox1"/>
$("input#checkbox1").click(function() {
console.log($(this).attr('checked'));
console.log($(this).prop("checked"));
});
点击checkbox输出:
<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的更多相关文章
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- jquery選取所有checkbox和判斷是否全部checkbox已經被勾選
前言 勾選/取消勾選 全部勾選checkbox的時候 勾選/取消勾選 所有對應的checkbox 當所有對應checkbox有別勾選的時候, 全部勾選checkbox 也要被勾選 完整程式碼範例 前言 ...
- freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式
今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...
- li标签和checkbox绑定
参考原文:https://www.cnblogs.com/youxin/p/3885496.html 我们经常需要li或span包含一个checkbox,不管点击checkbox或li都会触发相应的事 ...
- 同上! 下拉复选框 点击当前的checkbox 选中后面li 添加到指定区域
(function() { $(".cxbtntj").click(function(){ console.log($("#jsLi1").attr(" ...
- jquery--获取input checkbox是否被选中以及渲染checkbox选中状态
jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...
- [置顶]
android ListView包含Checkbox滑动时状态改变
题外话: 在xamarin android的开发中基本上所有人都会遇到这个小小的坎,的确有点麻烦,当时我也折腾了好一半天,如果你能看到这篇博客,说明你和我当初也是一样的焦灼,如果你想解决掉这个小小的坎 ...
- [WPF 自定义控件]创建包含CheckBox的ListBoxItem
1. 前言 Xceed wpftoolkit提供了一个CheckListBox,效果如下: 不过它用起来不怎么样,与其这样还不如参考UWP的ListView实现,而且动画效果也很好看: 它的样式如下: ...
- 在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 ...
随机推荐
- 检测PC端和移动端的方法总结
正在苦逼的实习中,昨天公司让做一个页面,涉及到检测终端的问题,如果是手机设备,就跳转到指定的网页上,以前写响应式布局只要用@media screen来实现布局的差异化适应,但是现在不仅仅是布局,还要针 ...
- JS原型与原型链终极详解(转)
JavaScript原型及原型链详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object,Function 是JS自带的函数对象. ...
- Poj 1013 Counterfeit Dollar / OpenJudge 1013(2692) 假币问题
1.链接地址: http://poj.org/problem?id=1013 http://bailian.openjudge.cn/practice/2692 http://bailian.open ...
- [可拖动DIV]刚开通博客顺便就写了点东西!
说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...
- C#序列化/反序列化
序列化:将实体类以二进制或者XML的形式保存到磁盘或者内存中. 反序列化:将序列化的二进制文件和XML文件解析成实体类. 例如下面的二进制序列化与反系列化: using System; using S ...
- NHibernate多对多关联映射的实现
上次用EF演示了数据库多对多关系的操作,这次我们还是引用上次的案例,来演示如何在C#当中使用NHibernate. 首先介绍一下NHibernate框架的来源.熟悉Java编程的读者肯定知道Hiber ...
- PHP生成订单号(产品号+年的后2位+月+日+订单号)
require '../common.inc.php'; /* * 产品号+年的后2位+月+日+订单数 * @param [Int] $prodcutId 产品号 * @param [Int] $tr ...
- 使用Github总结
1. 使用Git GUI 首先熟悉一下GUI,如下: 第一步,首先将代码fork到自己的版本库下面,如下: 并获取clone URL,如下图: 然后点击GUI克隆已有版本库,如下图: 点击克隆就可以得 ...
- 《C和指针》读书笔记——第二章 基本概念
1.编译过程: source code→Compiler→Object code→Linker←Lib ↓ Exe 2.经过初始化的静态变量(static)在程序执行前能获得他们的值. 3.绝大多数环 ...
- 学会Twitter Bootstrap不再难
Twitter Bootstrap 3.0 是对其过去的重大改变,现在它更偏向于移动应用的框架,并且宣称是最好的web设计css框架之一,的确如此. 可能有人曾经使用过Twitter Bootstra ...