JavaScript判断复选框是否被选中，并获得值

最新推荐文章于 2022-07-07 00:21:30 发布

最新推荐文章于 2022-07-07 00:21:30 发布 · 631 阅读

文章标签：

#JavaScript #jQuery #C #C++ #C# #ViewUI

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和JQuery判断复选框的选中状态，并通过实例展示了如何在页面中初始化复选框，以及如何利用JQuery控制复选框的验证状态。

判断复选框是否被选中是很常用的，可以采用JS获得dom对象，通过判断 if(str[i].checked == true)来判断复选框是否被选中，也可以通过JQuery方式，判断if($(this).attr("checked"))。下面总结一下平时用到的代码。

//判断复选框是否被选中，并获得值
		function checkbox(){
		   var str=document.getElementsByName("trainType");
		   var objarray=str.length;
		   var chestr="";
		   for (i=0;i<objarray;i++) {
		　        if(str[i].checked == true) {
		　　            chestr+=str[i].value+",";
		　         }
		   }
		   return chestr;
		}
		//初始化复选框 
		function initSklb(){
			var sklbList = "${sklbList}";
			sklbList = sklbList.substring(0, sklbList.length-1);
			var str = document.getElementsByName("trainType");
   	  var objarray=str.length;
      var chestr="";
      for (var i=0; i < objarray; i++) {
    	  if(sklbList!=null && sklbList != "") {
              var type = new Array();
              type = sklbList.split(",");
              for(var m=0; m < type.length; m++){ 
            	  if(str[i].value == type[m]) {
    　　                                           str[i].checked = true;
                }
              }
    	  }
　         }
		}

页面代码：

<table width="95%" cellpadding="0" cellspacing="0" border="0">
            <c:forEach items="${trainTypeList}" var="trainType">
               <tr>
                 <td>
                    <input type="checkbox" id="trainType_${trainType.id}" name="trainType" value="${trainType.id}" class="Underline_Checkbox"/>
                 </td>
                 <td align="left">${trainType.typeNum}&nbsp;&nbsp;${trainType.typeName}</td>
               </tr>
						</c:forEach>
					<c:if test="${trainTypeList eq null}">
					   <tr>
					      <td>没有该教师的授课类别记录！</td>
					   </tr>
					</c:if>
					<tr style="height: 10px"></tr>
         </table>

通过JQuery来判断复选框是否被选中

$("input[type=checkbox]").click(function(){
				    var name =  $(this).attr('name');
				    var baseCourse_Period = "baseCourse_Period_"+name;
				    var baseCourse_TeacherId = "baseCourse_TeacherId_"+name;
				    if($(this).attr("checked")) {
			            $('#'+baseCourse_Period).unFormValidator(false);
			            $('#'+baseCourse_TeacherId).unFormValidator(false);
			            
					} else {
			            $('#'+baseCourse_Period).unFormValidator(true);
			            $('#'+baseCourse_TeacherId).unFormValidator(true);
					}		
				});