国产视频app在web前端中做一些類似用戶資料提交的功能時,有時需要用到html的復選框,來讓用戶自定義選擇一些默認設置好的項目,今天就來說一說,如何利用 javascript 和 jquery 來判斷html復選框是否被選中。

javascript 判斷復選框是否被選中的方法

示例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>

輸出結果:

js判斷復選框是否選中的方法

注意:

1、checkbox復選框被選中時,輸出 true ,否則輸出 false

国产视频app2、以上兩個示例的效果相同,只是調用的方法不同而已

jquery 判斷復選框是否被選中的方法

国产视频appjquery 判斷 checkbox 復選框是否被選中,可以使用 is() 和 prop() 兩種方法,都非常的簡單

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

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

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

<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')