在寫單選框案例的時候,感覺Juquery有一個bug,且聽我娓娓道來。
bug:
$('#selectAll').click(function(){
checkbox.attr('checked',true);
});
當我使用上面的代碼時,第一個有效,但是第二次就失效了。這是為什麼呢?查了百度,才知道是jquery版本的問題。
在jquery1.9以前,是可以使用
checkbox.attr('checked',true);
來修改是否選中單選框。
但是在jquery1.9以後,使用
checkbox.attr('checked',true);
隻能修改一次,第二次就沒有用了,需要改用
checkbox.prop('checked',true/false);
來修改是否選中單選框。
修改後的使用方法:
$('#selectAll').click(function(){
checkbox.prop('checked',true);
});
還有,在一般用到js其值為boolean類型(例:checked,selected,readonly,disabled等)時,直接改用prop()方法,反之使用attr()方法。
全選/全不選/反選的案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>單選框執行個體</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="checkbox">
<input type="checkbox" name="" id="">php
<input type="checkbox" name="" id="">java
<input type="checkbox" name="" id="">ruby
<input type="checkbox" name="" id="">python
</div>
<input type="button" value="全選" id="selectAll">
<input type="button" value="全不選" id="selectNone">
<input type="button" value="反選" id="selectReverse">
</body>
<script>
var checkbox = $('#checkbox>:checkbox');
//全選
$('#selectAll').click(function(){
checkbox.prop('checked',true);
});
//全不選
$('#selectNone').click(function(){
checkbox.prop('checked',false);
});
//反選
$('#selectReverse').click(function(){
checkbox.each(function(){
$(this).prop('checked',!$(this).prop('checked'));
});
});
</script>
</html>
效果圖:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM4ETN0YDMwEjMxETM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)