表單的全選、反選操作一
<form method="post" action="">
你愛好的運動是?<input type="checkbox" id="CheckedAll" />全選/全不選<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
<input type="button" id="send" value="提 交"/>
</form>
<script>
$("#CheckedAll").click(function(){
var checked =$(this).prop("checked")
//console.log(checked)
$('[name=items]:checkbox').prop("checked", checked );
$('[name=items]:checkbox').prop("checked", this.checked ); //所有checkbox跟着全選的checkbox走。
});
</script>
表單的全選、反選操作二
<form method="post" action="">
你愛好的運動是?
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="CheckedAll" value="全 選"/>
<input type="button" id="CheckedNo" value="全不選"/>
<input type="button" id="CheckedRev" value="反 選"/>
<input type="button" id="send" value="提 交"/>
</form>
//全選
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').prop('checked', true);
});
//全不選
$("#CheckedNo").click(function(){
$('[type=checkbox]:checkbox').prop('checked', false);
});
//反選
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
//此處用JQ寫法頗顯啰嗦。體現不出JQ飄逸的感覺。
//$(this).prop("checked", !$(this).prop("checked"));
//直接使用JS原生代碼,簡單實用
this.checked=!this.checked;
});
});
補充知識attr與prop
在表單中,有的瀏覽器只要寫disabled,checked就可以了,而有的要寫成disabled = “disabled”,checked=”checked”。
比如用attr(“checked”)獲取checkbox的checked屬性時選中的時候可以取到值,值為”checked”但沒選中獲取值就是undefined。
jq提供新的方法“prop”來獲取這些屬性,就是來解決這個問題的,以前我們使用attr獲取checked屬性時返回”checked”和””,現在使用prop方法獲取屬性則統一返回true和false。
那么,什么時候使用attr(),什么時候使用prop()?
1.添加屬性名稱該屬性就會生效應該使用prop();
2.是有true,false兩個屬性使用prop() 如 checked, selected 或者 disabled;
3.其他則使用attr();