1. 首頁 > 生活 > >

js判斷是否選中checkbox選中的值 js獲取checkbox是否選中

小知識



文章插圖
js判斷是否選中checkbox選中的值 js獲取checkbox是否選中

文章插圖

在web前端中做一些類似用戶資料提交的功能時 ， 有時需要用到html的復選框 ， 來讓用戶自定義選擇一些默認設置好的項目 ， 今天就來說一說 ， 如何利用 javascript 和 jquery 來判斷html復選框是否被選中 。
javascript 判斷 checkbox 復選框是否被選中的方法
示例1：
<!--html代碼--><input type="checkbox" name="green" onclick="Get(this)" />綠色<script> function Get(e){ //每次點擊都會輸出當前的狀態 console.log(e.checked); }</script>示例2：
<!--html代碼--><input type="checkbox" name="green" onclick="Get()" />綠色<script> function Get(){ var check = document.getElementsByTagName('input')[0]; //每次點擊都會打印出當前的狀態 console.log(check.checked); }</script>輸出結果：
注意：
1、checkbox復選框被選中時 ， 輸出 true ,否則輸出 false
2、以上兩個示例的效果相同 ， 只是調用的方法不同而已
jquery 判斷 checkbox 復選框是否被選中的方法
jquery 判斷 checkbox 復選框是否被選中 ， 可以使用 is() 和 prop() 兩種方法 ， 都非常的簡單
is() 方法判斷復選框是否被選中的代碼：
<!--html代碼--><input type="checkbox" name="host" id="mochu" />網站：http://www.feiniaomy.com<script> $('#mochu').click(function(){ console.log($(this).is(':checked')); });</script>prop() 方法判斷復選框是否被選中的代碼：
【js判斷是否選中checkbox選中的值 js獲取checkbox是否選中】<script> $('#mochu').click(function(){ console.log($(this).prop('checked')); });</script>注意：prop()方法只能在 jquery 1.6版本之后使用 ， 1.6之前的版本會報錯
補充內容:
在 jquery 1.6 之前的版本中 ， 可以使用 attr() 方法來判斷復選框是否被選中 ， 但1.6之后的版本 ， attr()方法會返回 undefined.
示例代碼：
$('mochu').attr('checked')