频道导航

jquery操作checkbox火狐下第二次无法勾选的解决方法

2019-01-06 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jquery操作checkbox火狐下第二次无法勾选的解决方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

最近在学习jQuery（版本jquery-1.9.1.js），要求用jQuery实现全选/全不选、反选，在IE（IE8）中没有问题，但在火狐浏览器中调试的时候出现了一些小问题，达不到效果。

你爱好的运动是

<input name="intrest" type="checkbox" />足球
<input name="intrest" type="checkbox" />篮球
<input name="intrest" type="checkbox" />羽毛球
<input name="intrest" type="checkbox" />乒乓球<br/>
<button id="allbtn"&gt;全选</button>
<button id="notallbtn"&gt;全不选</button>
<button id="reversebtn"&gt;反选</button>
<button>提交</button>

jQuery代码：

<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript" src="jquery-1.9.1.js">
<script type="text/javascript">
$().ready(function(){
//全选/全不选复选框
$("#selectal1").click( function(){
if($(this).attr("checked")==true){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",true);
});
}else{
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",false);
});
}
});
//全选按钮
$("#allbtn").click(function(){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",true);
});
});
//全不选按钮
$("#notallbtn").click(function(){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",false);
});
});
//反选按钮
$("#reversebtn").click(function(){
$("input:checkBox[id!='selectal1']").each(function() {
$(this).attr("checked",!$(this).attr("checked"));
});
});
})

复选框

绑定了click事件，点一次选中，再点击取消选中，依次类推。这个功能在IE8中没问题，但是在firefox中测试的时候，前两次都没有问题，可以正常显示选中和取消，但当再去选中的时候，复选框的属性checkBox值变为”checked”，没问题，但是复选框却不在显示选中状态，明明属性值改了，但是却不显示勾选，我以为是浏览器缓存的问题，但是删除缓存还是不行……..后来在网上看到了方法，说是jQuery版本的问题，jQuery1.6以上用attr会存在兼容性问题，得换成prop。

查了下API prop属性是这样的：

概述

获取在匹配的元素集中的第一个元素的属性值。随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误。 jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，于是乎把js代码里面的attr换成prop就行了。

代码：

效果！！！！ //全选/全不选复选框 $("#selectal1").click( function(){ if($(this).prop("checked")==true){ $("input:checkBox[id!='selectal1']").each(function() { $(this).prop("checked",true); }); }else{ $("input:checkBox[id!='selectal1']").each(function() { $(this).prop("checked",false); }); } }); //全选按钮 $("#allbtn").click(function(){ $("input:checkBox[id!='selectal1']").each(function() { $(this).prop("checked",true); }); }); //全不选按钮 $("#notallbtn").click(function(){ $("input:checkBox[id!='selectal1']").each(function() { $(this).prop("checked",false); }); }); //反选按钮 $("#reversebtn").click(function(){ $("input:checkBox[id!='selectal1']").each(function() { $(this).prop("checked",!$(this).prop("checked")); }); });

希望对大家有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/jquery/45313.html

checkbox无法勾选 checkbox火狐下选 checkbox第二次无法勾选 jquery