在web前端中做一些類似用戶資料提交的功能時(shí)，有時(shí)需要用到html的復(fù)選框，來(lái)讓用戶自定義選擇一些默認(rèn)設(shè)置好的項(xiàng)目，今天就來(lái)說(shuō)一說(shuō)，如何利用 JAVAscript 和 jquery 來(lái)判斷html復(fù)選框是否被選中。

JavaScript 判斷 checkbox 復(fù)選框是否被選中的方法

示例1：

<!--html代碼-->
<input type="checkbox" name="green" onclick="Get(this)" />綠色
<script>
 function Get(e){
 //每次點(diǎn)擊都會(huì)輸出當(dāng)前的狀態(tài)
 console.log(e.checked);
 }
</script>

示例2：

<!--html代碼-->
<input type="checkbox" name="green" onclick="Get()" />綠色
<script>
 function Get(){
 var check = document.getElementsByTagName('input')[0];
 //每次點(diǎn)擊都會(huì)打印出當(dāng)前的狀態(tài)
 console.log(check.checked);
 }
</script>

輸出結(jié)果：

注意：

1、checkbox復(fù)選框被選中時(shí)，輸出 true ,否則輸出 false

2、以上兩個(gè)示例的效果相同，只是調(diào)用的方法不同而已

jquery 判斷 checkbox 復(fù)選框是否被選中的方法

jquery 判斷 checkbox 復(fù)選框是否被選中，可以使用 is() 和 prop() 兩種方法，都非常的簡(jiǎn)單

is() 方法判斷復(fù)選框是否被選中的代碼：

<!--html代碼-->
<input type="checkbox" name="host" id="mochu" />網(wǎng)站：http://www.feiniaomy.com
<script>
 $('#mochu').click(function(){
 console.log($(this).is(':checked'));
 });
</script>

prop() 方法判斷復(fù)選框是否被選中的代碼：

<script>
 $('#mochu').click(function(){
 console.log($(this).prop('checked'));
 });
</script>

注意：prop()方法只能在 jquery 1.6版本之后使用，1.6之前的版本會(huì)報(bào)錯(cuò)

補(bǔ)充內(nèi)容:

在 jquery 1.6 之前的版本中，可以使用 attr() 方法來(lái)判斷復(fù)選框是否被選中，但1.6之后的版本，attr()方法會(huì)返回 undefined.

示例代碼：

$('mochu').attr('checked')