checkbox处理

最新推荐文章于 2023-08-14 17:18:36 发布

最新推荐文章于 2023-08-14 17:18:36 发布 · 102 阅读

·

0

·

文章标签：

#JavaScript #HTML #ViewUI

Javascript and CSS 专栏收录该内容

16 篇文章

订阅专栏

xml 代码

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>cb</title>
<script type="text/javascript" charset="utf-8">
var get_all_checkboxs = function(container_id) {
var inputs;
var container;
if(container_id == undefined) {
inputs = document.getElementsByTagName('input');
} else {
container = document.getElementById(container_id);
if(container == 'undefined') {
alert('param have error.');
} else {
inputs = container.getElementsByTagName('input');
}
}
return inputs
};
//status ["select", "unselect", "reverseSelect"]
var process_checkbox = function(inputs, status) {
if(inputs.length == 0) {
alert('have not checkbox.');
} else {
for(var i = 0; i < inputs.length; i++) {
input = inputs[i];
if(input.type == 'checkbox') {
switch(status) {
case 'select':
input.checked = 'checked';
break;
case 'unselect':
input.checked = '';
break;
case 'reverseSelect':
if(input.checked) {
input.checked = '';
} else {
input.checked = 'checked';
}
break;
} // switch
}
} // for
} //if
};
var all_select = function(params) {
process_checkbox(get_all_checkboxs(params.container), 'select');
};
var all_unselect = function(params) {
process_checkbox(get_all_checkboxs(params.container), 'unselect');
};
var reverse_select = function(params) {
process_checkbox(get_all_checkboxs(params.container), 'reverseSelect');
};
// container default document
// attr_name
var get_all_select_values = function(params) {
var inputs = get_all_checkboxs(params.container);
var values = [];
if(inputs.length == 0) {
alert('have not checkbox.');
} else {
for(var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if((input.type == 'checkbox')&&(input.checked)) {
values.push(input.getAttribute(params.attr_name || 'value'));
}
} // for
}
return values;
};
</script>
</head>
<body id="cb" onload="">
<input type="checkbox" name="some_name" value="1" id="some_name">
<input type="checkbox" name="some_name" value="1" id="some_name">
<input type="checkbox" name="some_name" value="1" id="some_name">
<input type="checkbox" name="some_name" value="1" id="some_name">
<input type="checkbox" name="some_name" value="1" id="some_name">
<input type="checkbox" name="some_name" value="1" id="some_name">
<div id="div_container" style="border: 2px solid red;">
<input type="checkbox" name="some_name" value="2" id="some_name">
<input type="checkbox" name="some_name" value="2" id="some_name">
<input type="checkbox" name="some_name" value="2" id="some_name">
<input type="checkbox" name="some_name" value="2" id="some_name">
<input type="checkbox" name="some_name" value="2" id="some_name">
<input type="checkbox" name="some_name" value="2" id="some_name">
</div>
<div>
<input type="button" name="some_name" value="all select" id="some_name" onclick="all_select({})">
<input type="button" name="some_name" value="all unselect" id="some_name" onclick="all_unselect({})">
<input type="button" name="some_name" value="all reverse select" id="some_name" onclick="reverse_select({})">
</div>
<div>
<input type="button" name="some_name" value="all select" id="some_name" onclick="all_select({container: 'div_container'})">
<input type="button" name="some_name" value="all unselect" id="some_name" onclick="all_unselect({container: 'div_container'})">
<input type="button" name="some_name" value="all reverse select" id="some_name" onclick="reverse_select({container: 'div_container'})">
</div>
<div>
<input type="button" name="some_name" value="all get_all_select_values" id="some_name" onclick="alert(get_all_select_values({attr_name: 'value'}));">
<input type="button" name="some_name" value="get_all_select_values" id="some_name" onclick="alert(get_all_select_values({container: 'div_container', attr_name: 'value'}));">
<input type="button" name="some_name" value="get_all_select_values" id="some_name" onclick="alert(get_all_select_values({}));">
<input type="button" name="some_name" value="get_all_select_values" id="some_name" onclick="alert(get_all_select_values({container: 'div_container'}));">
</div>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。