javascript判断checkbox是否被选中

时间:2017-03-21
js要判断checkbox是否被选中,可以使用checkbox的checked属性来判断,如果checkbox的checked属性为true则表示复选框checkbox已选中,否则表示没有选中,本文章向大家介绍javascript如何判断checkbox是否被选中,需要的朋友可以参考一下。

1. 当表单里面只有一个checkbox复选框时,这时候很容易判断checkbox复选框是否被选中,如下实例:

<div id="divId" class="divTable">
<div class="tableBody">
<ul ><li ><input id="ck1" type="checkbox" value="501" ></li></ul>
</div>
</div>
<script>
if(document.getElementById("ck1").checked){
    alert("checkbox is checked");
}
</script>

document.getElementById("ck1").checked用于获取id为ck1的复选框的checked属性值,如果为true表示复选框选中,否则没有被选中。

2。 当表单里有n个checkbox的时候,我们需要使用js遍历来分别判断每个checkbox复选框checked属性值, 如:

<input type="checkbox" id="cashbagSaveYN" name="cashbagSaveYN" value="" />
<input type="checkbox" id="cashbagSaveYN" name="cashbagSaveYN" value="" />
<input type="checkbox" id="cashbagSaveYN" name="cashbagSaveYN" value="" />
function ifChecked()
{
   var a = document.getElementsByName("cashbagSaveYN"); 
   var n = a.length;
   var k = 0;
   for (var i=0; i<n; i++){
        if(a[i].checked){
            k = 1;
        }
    }
        if(k==0){
        alert("请选中Checkbox!");
        return;
    }
 }

document.getElementsByName("cashbagSaveYN")获取到HTML文档中的所以checkbox,结果为一个数组,数组的元素为每个checkbox对象,然后我们使用for遍历这个数组,分别判断每个checkbox的checked属性值,从而来获取checkbox复选框是否被选中。

再看一个实例,该实例也是演示javascript如何判断checkbox是否被选中的。

<html>
    <form name="orderForm">
      <input type="checkbox" name="door4">4 doors<br>
      <input type="checkbox" name="door2">2 doors<hr>
      <input type="button" value="Submit Order" name="orderButton" onClick="submitOrder()">
    </form>
    <script language="JavaScript">
    function submitOrder() {
      if((document.orderForm.door4.checked == true) && (document.orderForm.door2.checked == true)){
        console.log("You selected two different door styles. Reselect door style.");
        document.orderForm.door4.checked = false;
        document.orderForm.door2.checked = false;

      }else if((document.orderForm.door4.checked == false) && (document.orderForm.door2.checked == false)){
        console.log("You did not select a door style! Please select a door style.");
      } else  {
        var alertString = String("Order: ");
        if(document.orderForm.door4.checked == true)
          alertString += "4 doors.";       
        if(document.orderForm.door2.checked == true)
          alertString += "2 doors.";       
        console.log(alertString);
      }
    }
    </script>
</html>