js多选

最新推荐文章于 2021-12-06 10:41:03 发布

最新推荐文章于 2021-12-06 10:41:03 发布 · 119 阅读

文章标签：

#HTML

javaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现表格多选功能的方法，并通过检查是否有项目被选中来控制删除按钮的状态。当没有选择任何记录时，删除按钮将变为不可用状态。


<script type="text/javascript">
			function actionEvent(methodname){
			var form = document.forms[0];
			if(validateIsSelect(form.all, form.productids)){
				form.action='';
				form.method.value=methodname;
				form.submit();
			}else{
				alert("请选择要操作的记录");
			}
		}

	/**
		多选
	*/
	function allselect(allobj,items){
	    var state = allobj.checked;
	    if(items.length){
	    	for(var i=0;i<items.length;i++){
	    		if(!items[i].disabled) items[i].checked=state;
	    	}
	    }else{
	    	if(!items[i].disabled) items.checked=state;
	    }
	}
	/*
	 * 判断是否选择了记录
     */
	function validateIsSelect(allobj,items){
	    var state = allobj.checked;
	    if(items.length){
	    	for(var i=0;i<items.length;i++){
	    		if(items[i].checked) return true;
	    	}
	    }else{
	    	if(items.checked) return true;
	    }
	    return false;
	}
	</script>


.....
<td><INPUT TYPE="checkbox" NAME="newsid" value="${id }"/></td>
.....

<td>
					<INPUT TYPE="checkbox" NAME="all" onclick="javascript:allselect(this,this.form.newsid)"/>全选
				</td>

如果要多选并删除的话,要对删除按钮进行控制,在没选择任务记录时,删除按钮为灰色即不可用状态,选择记录后为可用,在js代码中加上如下:


//设置删除按钮是否可见
		function buttonDisable(){
	        var checkbox = document.getElementsByName("newsid");
	        for(var i=0;i<checkbox.length;i++){
	            if (checkbox[i].checked) {
	                document.getElementById("sub").disabled=false;
	                return;
	            }else{
	                document.getElementById("sub").disabled=true;
	            }

	        }
	    }

		function allselect(allobj,items){
		    var state = allobj.checked;
		    if(items.length){
		    	for(var i=0;i<items.length;i++){
		    		if(!items[i].disabled)
		    		{
		    			items[i].checked=state
		    			if(items[i].checked){

			    		document.getElementById("sub").disabled=false;

		    			}
			    		else{
			    			 document.getElementById("sub").disabled=true;
			    		}

		    		} 

		    	}
		    }else{
		    	if(!items[i].disabled)
		    	{
			    	items.checked=state;

		    	} 
		    }
		}