java 得到checkbox_获取checkbox的值

<  !DOCTYPE html PUBLIC "-//W3C//DTD HTML

4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<  html>

<  head>

<  mce:style><

!--

-->< /mce:style>< style mce_bogus="1">

<  /style>

<

title>JS获取复选框被选中的值< /title>

<  /head>

<  body>

<  input type="checkbox"

name="test" value="0" / >0

<  input type="checkbox"

name="test" value="1" / >1

<  input type="checkbox"

name="test" value="2" / >2

<  input type="checkbox"

name="test" value="3" / >3

<  input type="checkbox"

name="test" value="4" / >4

<  input type="checkbox"

name="test" value="5" / >5

<  input type="checkbox"

name="test" value="6" / >6

< input type="checkbox" name="test"

value="7" / >7

< input type="button" οnclick="chk()"

value="提  交" / >

< /body>

< /html

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML

4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

< html>

< head>

< mce:style>< !--

-->< /mce:style>< style mce_bogus="1">

< /style>

< title>JS获取复选框被选中的值< /title>

< /head>

< body>

< input type="checkbox" name="test"

value="0" / >0

< input type="checkbox" name="test"

value="1" / >1

< input type="checkbox" name="test"

value="2" / >2

< input type="checkbox" name="test"

value="3" / >3

< input type="checkbox" name="test"

value="4" / >4

< input type="checkbox" name="test"

value="5" / >5

< input type="checkbox" name="test"

value="6" / >6

< input type="checkbox" name="test"

value="7" / >7

< input type="button" οnclick="chk()"

value="提  交" / >

< /body>

< /html

JS代码

[javascript] view plaincopyprint?

< mce:script src="jquery.js" mce_src="jquery.js"><

/mce:script>< !--这是载入jquery.js文件，如果不使用jquery可以去掉-->

< mce:script type="text/javascript">< !--

function chk(){

var obj=document.getElementsByName('test');

//选择所有name="'test'"的对象，返回数组

//取到对象数组后，我们来循环检测它是不是被选中

var s='';

for(var i=0; i< obj.length; i++){

if(obj[i].checked)

s+=obj[i].value+',';  //如果选中，将value添加到变量s中

}

//那么现在来检测s的值就知道选中的复选框的值了

alert(s==''?'你还没有选择任何内容！':s);

}

function jqchk(){  //jquery获取复选框值

var chk_value =[];

$('input[name="test"]:checked').each(function(){

chk_value.push($(this).val());

});

alert(chk_value.length==0

?'你还没有选择任何内容！':chk_value);

}

// -->< /mce:script>

< mce:script src="jquery.js" mce_src="jquery.js"><

/mce:script>< !--这是载入jquery.js文件，如果不使用jquery可以去掉-->

< mce:script type="text/javascript">< !--

function chk(){

var obj=document.getElementsByName('test');

//选择所有name="'test'"的对象，返回数组

//取到对象数组后，我们来循环检测它是不是被选中

var s='';

for(var i=0; i< obj.length; i++){

if(obj[i].checked)

s+=obj[i].value+',';  //如果选中，将value添加到变量s中

}

//那么现在来检测s的值就知道选中的复选框的值了

alert(s==''?'你还没有选择任何内容！':s);

}

function jqchk(){  //jquery获取复选框值

var chk_value =[];

$('input[name="test"]:checked').each(function(){

chk_value.push($(this).val());

});

alert(chk_value.length==0

?'你还没有选择任何内容！':chk_value);

}

// -->< /mce:script>

对checkbox的其他几个操作

1. 全选

2. 取消全选

3. 选中所有奇数

4. 反选

5. 获得选中的所有值

js代码

[javascript] view plaincopyprint?

$("document").ready(function(){

$("#btn1").click(function(){

$("[name='checkbox']").attr("checked",'true');//全选

})

$("#btn2").click(function(){

$("[name='checkbox']").removeAttr("checked");//取消全选

})

$("#btn3").click(function(){

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

})

$("#btn4").click(function(){

$("[name='checkbox']").each(function(){//反选

if($(this).attr("checked")){

$(this).removeAttr("checked");

}

else{

$(this).attr("checked",'true');

}

})

})

$("#btn5").click(function(){//输出选中的值

var str="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"/r/n";

//alert($(this).val());

})

alert(str);

})

})

$("document").ready(function(){

$("#btn1").click(function(){

$("[name='checkbox']").attr("checked",'true');//全选

})

$("#btn2").click(function(){

$("[name='checkbox']").removeAttr("checked");//取消全选

})

$("#btn3").click(function(){

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

})

$("#btn4").click(function(){

$("[name='checkbox']").each(function(){//反选

if($(this).attr("checked")){

$(this).removeAttr("checked");

}

else{

$(this).attr("checked",'true');

}

})

})

$("#btn5").click(function(){//输出选中的值

var str="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"/r/n";

//alert($(this).val());

})

alert(str);

})

})

html代码:

[xhtml] view plaincopyprint?

< !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>louis-blog >> jQuery 对checkbox的操作<

/title>

< mce:script type='text/javascript'

src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"

mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"><

/mce:script>

< SCRIPT LANGUAGE="JavaScript">

< !--

$("document").ready(function(){

$("#btn1").click(function(){

$("[name='checkbox']").attr("checked",'true');//全选

})

$("#btn2").click(function(){

$("[name='checkbox']").removeAttr("checked");//取消全选

})

$("#btn3").click(function(){

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

})

$("#btn4").click(function(){

$("[name='checkbox']").each(function(){//反选

if($(this).attr("checked")){

$(this).removeAttr("checked");

}

else{

$(this).attr("checked",'true');

}

})

})

$("#btn5").click(function(){//输出选中的值

var str="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"/r/n";

//alert($(this).val());

})

alert(str);

})

})

-->

< /SCRIPT>

< /HEAD>

< body style="text-align:center;margin: 0 auto;font-size:

12px;" mce_style="text-align:center;margin: 0 auto;font-size:

12px;">

< div style="border: 1px solid #999; width: 500px; padding:

15px; background: #eee; margin-top: 150px;">

< form name="form1" method="post" action="">

< input type="button" id="btn1" value="全选">

< input type="button" id="btn2" value="取消全选">

< input type="button" id="btn3" value="选中所有奇数">

< input type="button" id="btn4" value="反选">

< input type="button" id="btn5" value="获得选中的所有值">

< br / >< br / >

< input type="checkbox" name="checkbox"

value="checkbox1">

checkbox1

< input type="checkbox" name="checkbox"

value="checkbox2">

checkbox2

< input type="checkbox" name="checkbox"

value="checkbox3">

checkbox3

< input type="checkbox" name="checkbox"

value="checkbox4">

checkbox4

< input type="checkbox" name="checkbox"

value="checkbox5">

checkbox5

< input type="checkbox" name="checkbox"

value="checkbox6">

checkbox6

< /form>

< /div>

< /body>

< /HTML>