有个比较奇怪的问题,checkbox的checked="cheecked"属性已添加,但是前边却没有后打钩

如图所示,第一个已是checked="checked"

======================================

上边是一个全选按钮,我试图点这个复选框来实现下边复选框的全选/全不选

但是效果不佳

效果呈现为:第一次点这个复选框,下边所有的都被勾选. 再点这个复选框,下边所有的都被取消勾选. 之后再点这个复选框无论多少次,只有属性的变化没有勾选的显示

代码如下:


        if(document.getElementById("checkAll").checked){
		$("input[name='jinjian']").attr("checked","checked");
	}else{
		$("input[name='jinjian']").prop("checked",false).removeAttr("checked");
	}

或者如下:(经过各种尝试,下边这是最早的写法,依然一样的问题)


$("input[name='jinjian']").attr("checked",document.getElementById("checkAll").checked);

====================================
而当我写作


$("input[name='jinjian']").attr("checked",$(this).attr("checked"));

则完全不起效,第一次都无法全选/全不选.

=======================================

环境是ThinkPHP jquery1.10.2

15 个解决方案

#1

这个问题别人好像遇到过，但我从未遇到过
试试
$("input[name='jinjian']").attr('checked',true);
或
$("input[name='jinjian']")[0].checked = 'cheched';

#2

引用 1 楼 wzs_xyz 的回复:

这个问题别人好像遇到过，但我从未遇到过
试试
$("input[name='jinjian']").attr('checked',true);
或
$("input[name='jinjian']")[0].checked = 'cheched';

$("input[name='jinjian']")[0].checked = 'checked';

#3

Jquery 1.6+
你用的jquery版本使用prop比较好


if($("#checkAll").prop("checked") == true){
        $("input[name='jinjian']").prop("checked",true);
    }else{
        $("input[name='jinjian']").prop("checked",false);
    }

#4

$(全选).onclick(
function(){$('input[type=checkbox]').attr('checked', $(全选).attr('checked'));} )

#5

引用 2 楼 wzs_xyz 的回复:

Quote: 引用 1 楼 wzs_xyz 的回复:

这个问题别人好像遇到过，但我从未遇到过
试试
$("input[name='jinjian']").attr('checked',true);
或
$("input[name='jinjian']")[0].checked = 'cheched';

$("input[name='jinjian']")[0].checked = 'checked';

感谢回复,按照你提供的这种思路,给所有的复选框一个个加checked="checked" 是可以的,成功了
代码如下


if(document.getElementById("checkAll").checked){
		$.each($("input[name='jinjian']"),function(i,n){
			$(n)[0].checked="checked";
		});
    }else{
        $("input[name='jinjian']").removeAttr("checked");
    }

但是我还是想问一个为什么.为什么之前的写法不行,是jquery的问题吗?

#6

引用 4 楼 u012463264 的回复:

$(全选).onclick(
function(){$('input[type=checkbox]').attr('checked', $(全选).attr('checked'));} )

这种写法我主楼的帖子中试过了是不行的

这可能是环境问题,但是我希望能知道什么样的环境下这种写法会出现问题呢?

#7

用
.prop("checked",true);

#8

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.7.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {
	$("#quanxuan").click(function(e) {
		if ($(this).attr("checked")=="checked"){
			$("input[name='jinjian']").attr("checked",true)
			}
		else{
			$("input[name='jinjian']").removeAttr("checked")
			}
    });
});

</script>
</head>

<body>
<table width="400" border="1" align="center" id="table1">
  <tr>
    <td><input type="checkbox" name="quanxuan" id="quanxuan"></td>
    <td>a</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>1</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>2</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>3</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>4</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>5</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>6</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>7</td>
  </tr>
</table>
</body>
</html>

#9

引用 3 楼 no200830740203 的回复:

Jquery 1.6+
你用的jquery版本使用prop比较好


if($("#checkAll").prop("checked") == true){
        $("input[name='jinjian']").prop("checked",true);
    }else{
        $("input[name='jinjian']").prop("checked",false);
    }

这样写也是可以的,没有出现主楼的问题
但是jquery手册上说的是 IE6下要使用prop

引用

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

而我用的是火狐

还是希望能知道,为什么会出现主楼的问题.

#10

引用 8 楼 asdf147asdf 的回复:

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.7.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {
	$("#quanxuan").click(function(e) {
		if ($(this).attr("checked")=="checked"){
			$("input[name='jinjian']").attr("checked",true)
			}
		else{
			$("input[name='jinjian']").removeAttr("checked")
			}
    });
});

</script>
</head>

<body>
<table width="400" border="1" align="center" id="table1">
  <tr>
    <td><input type="checkbox" name="quanxuan" id="quanxuan"></td>
    <td>a</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>1</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>2</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>3</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>4</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>5</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>6</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>7</td>
  </tr>
</table>
</body>
</html>

感谢但这样的写法在我的环境下依然是不行的....

#11

$(document).ready(function(e) {
    $("#quanxuan").click(function(e) {
       $("input[name='jinjian']").attr("checked",this.checked);
    });
});

#12

引用 9 楼 anyilaoliu 的回复:

Quote: 引用 3 楼 no200830740203 的回复:
Jquery 1.6+
你用的jquery版本使用prop比较好
if($("#checkAll").prop("checked") == true){
        $("input[name='jinjian']").prop("checked",true);
    }else{
        $("input[name='jinjian']").prop("checked",false);
    }
这样写也是可以的,没有出现主楼的问题
但是jquery手册上说的是 IE6下要使用prop
引用
1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

而我用的是火狐

还是希望能知道,为什么会出现主楼的问题.

因为checkbox在不同浏览器以及不同js版本下面选中的值会不一样
在attr里面
有时候是 true false
有时候是 "checked" ""

#13

参考

#14

.prop("checked",false) 试着把false改为""试试,如下:
.prop("checked","")

#15

if ($(this).attr("checked")=="checked") 你这里写的有错误啊和环境没关吧
if ($(this).attr("checked"))这样写

#1

这个问题别人好像遇到过，但我从未遇到过
试试
$("input[name='jinjian']").attr('checked',true);
或
$("input[name='jinjian']")[0].checked = 'cheched';

#2

引用 1 楼 wzs_xyz 的回复:

这个问题别人好像遇到过，但我从未遇到过
试试
$("input[name='jinjian']").attr('checked',true);
或
$("input[name='jinjian']")[0].checked = 'cheched';

$("input[name='jinjian']")[0].checked = 'checked';

#3

Jquery 1.6+
你用的jquery版本使用prop比较好


if($("#checkAll").prop("checked") == true){
        $("input[name='jinjian']").prop("checked",true);
    }else{
        $("input[name='jinjian']").prop("checked",false);
    }

#4

$(全选).onclick(
function(){$('input[type=checkbox]').attr('checked', $(全选).attr('checked'));} )

#5

引用 2 楼 wzs_xyz 的回复:

Quote: 引用 1 楼 wzs_xyz 的回复:

这个问题别人好像遇到过，但我从未遇到过
试试
$("input[name='jinjian']").attr('checked',true);
或
$("input[name='jinjian']")[0].checked = 'cheched';

$("input[name='jinjian']")[0].checked = 'checked';

感谢回复,按照你提供的这种思路,给所有的复选框一个个加checked="checked" 是可以的,成功了
代码如下


if(document.getElementById("checkAll").checked){
		$.each($("input[name='jinjian']"),function(i,n){
			$(n)[0].checked="checked";
		});
    }else{
        $("input[name='jinjian']").removeAttr("checked");
    }

但是我还是想问一个为什么.为什么之前的写法不行,是jquery的问题吗?

#6

引用 4 楼 u012463264 的回复:

$(全选).onclick(
function(){$('input[type=checkbox]').attr('checked', $(全选).attr('checked'));} )

这种写法我主楼的帖子中试过了是不行的

这可能是环境问题,但是我希望能知道什么样的环境下这种写法会出现问题呢?

#7

用
.prop("checked",true);

#8

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.7.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {
	$("#quanxuan").click(function(e) {
		if ($(this).attr("checked")=="checked"){
			$("input[name='jinjian']").attr("checked",true)
			}
		else{
			$("input[name='jinjian']").removeAttr("checked")
			}
    });
});

</script>
</head>

<body>
<table width="400" border="1" align="center" id="table1">
  <tr>
    <td><input type="checkbox" name="quanxuan" id="quanxuan"></td>
    <td>a</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>1</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>2</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>3</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>4</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>5</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>6</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>7</td>
  </tr>
</table>
</body>
</html>

#9

引用 3 楼 no200830740203 的回复:

Jquery 1.6+
你用的jquery版本使用prop比较好


if($("#checkAll").prop("checked") == true){
        $("input[name='jinjian']").prop("checked",true);
    }else{
        $("input[name='jinjian']").prop("checked",false);
    }

这样写也是可以的,没有出现主楼的问题
但是jquery手册上说的是 IE6下要使用prop

引用

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

而我用的是火狐

还是希望能知道,为什么会出现主楼的问题.

#10

引用 8 楼 asdf147asdf 的回复:

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.7.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {
	$("#quanxuan").click(function(e) {
		if ($(this).attr("checked")=="checked"){
			$("input[name='jinjian']").attr("checked",true)
			}
		else{
			$("input[name='jinjian']").removeAttr("checked")
			}
    });
});

</script>
</head>

<body>
<table width="400" border="1" align="center" id="table1">
  <tr>
    <td><input type="checkbox" name="quanxuan" id="quanxuan"></td>
    <td>a</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>1</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>2</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>3</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>4</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>5</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian" ></td>
    <td>6</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="jinjian"></td>
    <td>7</td>
  </tr>
</table>
</body>
</html>

感谢但这样的写法在我的环境下依然是不行的....

#11

$(document).ready(function(e) {
    $("#quanxuan").click(function(e) {
       $("input[name='jinjian']").attr("checked",this.checked);
    });
});

#12

引用 9 楼 anyilaoliu 的回复:

Quote: 引用 3 楼 no200830740203 的回复:
Jquery 1.6+
你用的jquery版本使用prop比较好
if($("#checkAll").prop("checked") == true){
        $("input[name='jinjian']").prop("checked",true);
    }else{
        $("input[name='jinjian']").prop("checked",false);
    }
这样写也是可以的,没有出现主楼的问题
但是jquery手册上说的是 IE6下要使用prop
引用
1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。

而我用的是火狐

还是希望能知道,为什么会出现主楼的问题.

因为checkbox在不同浏览器以及不同js版本下面选中的值会不一样
在attr里面
有时候是 true false
有时候是 "checked" ""

#13

参考

#14

.prop("checked",false) 试着把false改为""试试,如下:
.prop("checked","")

#15

if ($(this).attr("checked")=="checked") 你这里写的有错误啊和环境没关吧
if ($(this).attr("checked"))这样写

秒客网

有个比较奇怪的问题,checkbox的checked="cheecked"属性已添加,但是前边却没有后打钩

15 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

相关文章