使用js操作checkbox

我們在專案中經常會遇到這個問題：使用js判斷checkbox框是否被選中以及使用js對checkbox進行操作。
其實這些需求很簡單，這裡給出使用原生js和jQuery來完成這些需求。

一.使用原生JavaScript判斷是否選中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 獲取checkbox元素
    var box=document.getElementById("test");      
    // 判斷是否被拒選中，選中返回true，未選中返回false
    alert(box.checked);
</script>

二.使用原生JavaScript判斷是否選中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 獲取checkbox元素
    var box=document.getElementById("test");      
    // 判斷是否被拒選中，選中返回true，未選中返回false
    alert(box.checked);
</script>

三.使用原生Javascript移除選中的checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 獲取checkbox元素
    var box=document.getElementById("test");      
    // 判斷是否被拒選中，選中返回true，未選中返回false
    box.checked=false;
</script>

四.使用jQuery判斷是否選中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 選中返回true，未選中返回false
    $(`#test`).is(":checked");

    // 選中返回true，未選中返回false;一定要注意，這裡不可以使用attr("checked")來判斷
    $("#test").prop("checked")
</script>

五.使用jQuery設定選中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
     $("#test").prop("checked","trure")
     $("#test").attr("checked","true")
</script>

六.使用jQuery設定移除選中的checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
     $("#test").prop("checked","false")
     $("#test").attr("checked","false")
</script>