天天看點

多選框取值

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">

<html>

<head>

<style>

</style>

<title>js擷取複選框被選中的值</title>

</head>

<body>

<input type="checkbox" name="aihao" value="0" />0  

<input type="checkbox" name="aihao" value="1" />1  

<input type="checkbox" name="aihao" value="2" />2  

<input type="checkbox" name="aihao" value="3" />3  

<input type="checkbox" name="aihao" value="4" />4  

<input type="checkbox" name="aihao" value="5" />5  

<input type="checkbox" name="aihao" value="6" />6  

<input type="checkbox" name="aihao" value="7" />7  

<input type="button" value="提  交" />

</body>

</html> 總共有八個checkbox和一個按鈕,點選“送出”按鈕後可以知道目前所選中的複選框的value值,下面是js代碼,

<script src="jquery.js"></script><!--這是載入jquery.js檔案,如果不使用jquery可以去掉-->

<script>

function chk(){

 var obj=document.getelementsbyname('aihao');  //選擇所有name="aihao"的對象,傳回數組

 //取到對象數組後,我們來循環檢測它是不是被選中

 var s='';

 for(var i=0; i<obj.length; i++){

   if(obj[i].checked) s+=obj[i].value+',';  //如果選中,将value添加到變量s中

 }

 //那麼現在來檢測s的值就知道選中的複選框的值了

 alert(s==''?'你還沒有選擇任何内容!':s);

}

function jqchk(){  //jquery擷取複選框值

 $('input[name="aihao"]:checked').each(function(){

   s+=$(this).val()+',';

 });

</script> 點選“送出”後,可以得到正确的選擇值了,但是後面多一個,(英文逗号),這個可以檢測一下再用substring去除,或者擷取到複選框選擇值後一般都要轉成數組再使用的,是以也可以在轉成數組後,去除最後一個數組元素。

繼續閱讀