首页 > 代码库 > input checkbox问题和li里面包含checkbox
input checkbox问题和li里面包含checkbox
<input type="checkbox" id="checkbox1"/>
$("input#checkbox1").click(function() {
console.log($(this).attr(‘checked‘));
console.log($(this).prop("checked"));
});
点击checkbox输出:
我们经常需要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++; }); });
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。