DOM&&JQ之checkBox获取value

末蓝、 2022-07-12 03:25 166阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <form name='form1' method="post" id="form1" action="XXOO">
      <input type="hidden" id="checkIds" name="checkIds" value="" />
      <label>
        <input name="tid" type="checkbox" id="tid" value="1" />
      </label>
      <label>
        <input name="tid" type="checkbox" id="tid" value="2" />
      </label>
      <label>
        <input name="tid" type="checkbox" id="tid" value="3" />
      </label>
      <label>
        <input name="tid" type="checkbox" id="tid" value="4" />
      </label>
      <label>
        <input name="tid" type="checkbox" id="tid" value="5" />
      </label>
    </form>
    <p><a href="javascript:;" οnclick="submitForm();">DOM</a></p>
    <p><a href="javascript:;" οnclick="submitForm2();">JQ</a></p>
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script language="javascript">
    //JS原生DOM方式获取选中的多选框的
    function submitForm(){
    	var chestr = "";
    	var str = document.getElementsByName("tid");
    	for (i=0;i<str.length;i++)
    	{
    	  if(str[i].checked == true)
    	  {
    			chestr+=str[i].value+",";
    	  }
    	}
    	if(chestr == "")
    	{
    	  alert("请先选择一件商品！");
    	}
    	else
    	{
    	  document.getElementById("checkIds").value=chestr.substring(0,chestr.length-1);
    	  alert(document.getElementById("checkIds").value);
    	  document.getElementById("form1").submit();
    	}	
    }
    
    //JQ方式获取选中的多选框的值
    function submitForm2(){
    	 var chestr = "";
    	 $("input[name='tid']:checked").each(function(i) {
    		   if(0==i){
    			chestr = $(this).val();
    		   }else{
    			chestr += (","+$(this).val());
    		   }
    	  });
    	  
    	if(chestr == "")
    	{
    	  alert("请先选择一件商品！");
    	}
    	else
    	{
    	  $("#checkIds").val(chestr);
    	  alert($("#checkIds").val());
    	  $("#form1").submit();
    	}
    }
    </script>
    </body>
    </html>