`
348102023
  • 浏览: 12872 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
最近访客 更多访客>>
社区版块
存档分类
最新评论

checkbox勾选变色与全选的一个实现(parentNode,parentElement区别对比)

IEJavaScriptCSSHTML 
阅读更多

管理该分类下的供应信息：（这是一个代码备份）

发上来才发现 选择select 的时候，应该判断一下select的选中项是否为""，不为空且点选信息的话，就提交。

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>管理该分类下的供应信息</title>
<style type="text/css">
body{margin:0;padding:50px 0;text-align:center;}
table,table td{margin:0 auto;padding:0;}
.def_tab{text-align:left;}
.def_tab thead{background:#c4d6c4;}
.def_tab tr td.cx{width:20px;}
.def_tab tr td.ci{}
.def_tab tr td{cursor:pointer;padding:2px 5px;border:1px solid #fff;}
.def_tab tr:hover td{background-color:#F0F0F0;}
.def_tab tr.selected td, .def_tab tr.selected:hover td{background-color:#ffffef;}
</style>
<script type="text/javascript">
//checkbox selected
function checkboxChangClass(checkNode, checkboxFlag){
	//alert(checkNode.checked);
	//IE不支持parentNode，只支持parentElement，而parentNode是标准的
	var currentTR = document.all?checkNode.parentElement.parentElement:checkNode.parentNode.parentNode;
	//alert(currentTR.nodeName);
	if(checkboxFlag){
		currentTR.className = 'selected';
	}else{
		currentTR.className = '';
	}
}

//checkbox selected all
function checkAll(obj, checkName){
	var checkElements = document.getElementsByName(checkName);
	var checkboxFlag = obj.checked;
	//alert(checkboxFlag);
	var i = checkElements.length;
	while(--i>=0){
		if(checkElements[i].checked == !checkboxFlag){
			checkElements[i].checked = checkboxFlag;
			checkboxChangClass(checkElements[i], checkboxFlag);
		}
	}
}

//form submit
function formSubmit(formId, checkName){
	var checkElements = document.getElementsByName(checkName);
	var i = checkElements.length;
	var flag = false;
	while(--i>=0){
		if(checkElements[i].checked == true){
			flag = true;
			break;
		};
	}
	if(flag == false){
		alert('请点选您所要操作的信息!');
	}else{
		document.getElementById(formId).submit();
	}
}
</script>
</head>
<body>
<form id="my_form" action="#" method="post">
<table class="def_tab" width="100%" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<td class="cx"><input type="checkbox" title="选中/取消选中" onclick="checkAll(this,'infoid');"></td>
			<td><select onChange="formSubmit('my_form','infoid');"><option value="">移动到...</option><option value="0">未自定义分类</option></select></td>
		</tr>
	</thead>
	<tbody>		
		<tr>
			<td class="cx"><input type="checkbox" value="1" name="infoid" onClick="checkboxChangClass(this, this.checked);" /></td>
			<td class="ci">关于我们第一次难忘的爬山经历。。。1</td>
		</tr>
		<tr>
			<td class="cx"><input type="checkbox" value="2" name="infoid" onClick="checkboxChangClass(this, this.checked);" /></td>
			<td class="ci">关于我们第一次难忘的爬山经历。。。2</td>
		</tr>
		<tr>
			<td class="cx"><input type="checkbox" value="3" name="infoid" onClick="checkboxChangClass(this, this.checked);" /></td>
			<td class="ci">关于我们第一次难忘的爬山经历。。。3</td>
		</tr>
		<tr>
			<td class="cx"><input type="checkbox" value="4" name="infoid" onClick="checkboxChangClass(this, this.checked);" /></td>
			<td class="ci">关于我们第一次难忘的爬山经历。。。4</td>
		</tr>
	</tbody>
</table>
</form>
</body>
</html>

 

分享到：
| Request.ServerVariables集合说明（转载）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics