来源：蜘蛛抓取(WebSpider)
时间：2014-10-14 05:11
标签：
jq点击显示隐藏
jquery如何获取复选框的值
字体：[ ] 类型：转载 时间：
获取复选框的值的方法有很多，举不胜举，在本文将为大家介绍下jquery是如何获取复选框的值的，感兴趣的朋友不要错过
代码如下: &!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" onclick="chk()" value="提 交" /& &/body& &/html
代码如下: &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. 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代码
代码如下: $("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); }) })
代码如下: &!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/ charset=utf-8" /& &title&louis-blog && jQuery 对checkbox的操作&/title& &mce:script type='text/javascript' src="/wp-includes/js/jquery/jquery.js" mce_src="/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:margin: 0font-size: 12" mce_style="text-align:margin: 0font-size: 12"& &div style="border: 1px solid #999; width: 500 padding: 15 background: # margin-top: 150"& &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&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具当前访客身份：游客 [
当前位置：
我现在实现了当我点击时能够选中和取消，但是属性checked在第一次选中时，再次点击没有删除，如何操作，这个是我的代码：
$(&.phone_a&).toggle(function(){
$(&.phone_a&).addAttr('checked');
},function(){
$(&.phone_a&).removeAttr(&checked&);
请各位指教一二
共有4个答案
<span class="a_vote_num" id="a_vote_num_
应该先做一个判断，如果这个属性已经有了，再次点击remove掉，如果属性没有，再次点击的时候add。
--- 共有 1 条评论 ---
这个添加的是class属性，并不是checked的
(2年前) &
<span class="a_vote_num" id="a_vote_num_
你这是操作这个元素的chekced属性
<span class="a_vote_num" id="a_vote_num_
不明白, 为何复选框要做这动作?
它本身不是有这功能吗?
<span class="a_vote_num" id="a_vote_num_
用的1.9版本吧，坑了好多人，用prop
prop('checked',true)
prop('checked',false)
更多开发者职位上
有什么技术问题吗？
梦梦阁的其它问题
类似的话题jquery实现点击input选中文字代码-jquery-网页制作-壹聚教程网jquery实现点击input选中文字代码
在输入用户名时我们有个提示当用户点击input时就全选input中的文字我们可以直接删除了，下面我们来看地两个实例。
点击text的input后，直接选中其中的所有文字
$(&input:text&).click(function(){
&&& $(this).select();
js我们使用的也是select
&form name=aaa method=&...& action=&...&&
&input type=text name=abc onfocus=this.select() value=关键字&
&script&aaa.abc.focus();&/script&
&input type=text name=abc onfocus=this.select() onblur=this.select() value=关键字&
上一页： &&&&&下一页：相关内容如何用JQuery实现获取checkbox选中的那一行的input中的值_百度知道
如何用JQuery实现获取checkbox选中的那一行的input中的值
思路：通过 :checked 筛选 checkbox 选中项，然后进行遍历，利用节点关系获取到input对象，最后使用val()方法获取input的内容。实例演示如下:1、HTML结构&table& &&&&&tr&
&&&&&&&&&td&&input type=&checkbox& name=&test&&&/td&
&&&&&&&&&td&&input type=&text&&&/td&&td&&input type=&text&&&/td& &&&&&/tr& &&&&&tr&
&&&&&&&&&td&&input type=&checkbox& name=&test&&&/td&
&&&&&&&&&td&&input type=&text&&&/td&&td&&input type=&text&&&/td& &&&&&/tr&&/table&&input type=&button& value=&确定&&2、jquery代码$(function(){ &&&&$(&:button&).click(function() {&&&&&&&&// 找到选中行的input&&&&&&&&var ipts = $(&:checkbox:checked&).parents(&tr&).find(&input:text&); &&&&&&&&&// 遍历input并使用val()方法获取值
&&&&&&&&str = .map(function() {return $(this).val();}).get().join(&, &);
&&&&&&&&alert(str); &&&&});});&3、效果演示
其他类似问题
为您推荐：
提问者采纳
$(&:checkbox:checked&).closest(&tr&).find(&input&).each(function(){&&&&...});
each(function(){}这个里面怎么写啊求QQ
$(&:checkbox:checked&).closest(&tr&).find(&:text&).each(function(i,&eleDom){&&&&//&遍历每个被选中的复选框所在行的文本框的值,&看你怎么用了，你要哪个&&&&alert('第&'&+&(i+1)&+&'&个文本框的值:&'&+&eleDom.value);});
提问者评价
问题解决了非常感谢 ！！！
其他2条回答
代码解决：&script&src=&jquery-1.7.1.min.js&&type=&text/javascript&&&/script&&script& $(document).ready(function(){
$(&input[type=checkbox]&).click(function(){
var&tr&=&$(this).parent(&td&).parent(&tr&);
tr.find(&input[type=text]&).each(function(){
alert($(this).val());
}); });&/script&
这个你直接这样获取就可以$(&#roleId&).val()//获取name的值即可。如果在后台的表单获取的话也是这样，你只要获取这个值就行。我在这里以Struts2里面获取form表单对象的为例：private&String&roleId；public&void&setRoleId(String&roleId)&{&&&&this.roleId&=&roleId;}public&String&getRoleId()&{&&&&return&this.roleId;}把他的name定义为Action的一个属性，提供set get 方法即可获取值，简单好用。不需要那么麻烦
我是要获取选中的一行里面的所有值不是只要ID啊
我是要获取选中的一行里面的所有值不是只要ID啊
jquery的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁jQuery显示隐藏复选框，显示第一行后面的复选框，第一行的复选框也跟着变换了位置，怎么改呢？_百度知道
jQuery显示隐藏复选框，显示第一行后面的复选框，第一行的复选框也跟着变换了位置，怎么改呢？
jQuery显示隐藏复选框显示第行面复选框第行复选框跟着变换位置何能让显示第行复选框改变位置呢代码：&html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&&title&标题文档&/title&&script type=&text/javascript& src=&jquery-1.6.min.js&&&/script&&script type=&text/javascript&&& & $ (function ()& & {& & & & $ ('tr:gt(0)').hide ();& & & & $ ('td:contains(&点&)').children (':checkbox').change (function ()& & & & {& & & & & & $ (this).prop ('checked') ? $ ('tr:gt(0)').show () : $ ('tr:gt(0)').hide ();& & & & });& & & & $ ('td:contains(&全部选择/全部取消&)').children (':checkbox').change (function ()& & & & {& & & & & & $ ('tr:gt(1)').find (':checkbox').prop ('checked', $ (this).prop ('checked'));& & & & });& & });&/script&&/head&&body&& & &table align=¢er&&& & & & &tr&& & & & & & &td&&input type=&checkbox& name=&didian&/&点&/td&& & & & &/tr&& & & & &tr&& & & & & & &td&&input type=&checkbox& name=&all&/&全部选择/全部取消&/td&& & & & &/tr&& & & & &tr&& & & & & & &td&&input type=&checkbox& &name=&beijing&/&北京&/td&& & & & & & &td&&input type=&checkbox& &name=&shanghai&/&海&/td&& & & & &/tr&& & & & &tr&& & & & & & &td&&input type=&checkbox& &name=&tianjin&/&津&&/td&& & & & & & &td&&input type=&checkbox& &name=&chongqing&/&重庆&/td&& & & & &/tr&& & & & &tr&& & & & & & &td&&input type=&checkbox& &name=&shenzhen&/&深圳&/td&& & & & & & &td&&input type=&checkbox& &name=&guangzhou&/&广州&&/td&& & & & &/tr&& & &/table&&/body&&/html&
提问者采纳
&style&type=&text/css&& td&{&width:150&}&&&&&&&&&&&&//给Td加式&/style&&table&align=¢er&&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&name=&didian&/&点&/td&&&&&&&&&&&&&&td&&&/td&&&&&&&&&&&&&&&!--&加Td&--&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&name=&all&/&全部选择/全部取消&/td&&&&&&&&&&&&&&td&&&/td&&&&&&&&&&&&&&!--&加Td&--&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&beijing&/&北京&/td&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&shanghai&/&海&/td&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&tianjin&/&津&&/td&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&chongqing&/&重庆&/td&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&shenzhen&/&深圳&/td&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&guangzhou&/&广州&&/td&&&&&&&&&&/tr&&&&&&/table&
不能增加td,只可以在现在基础上改css.
&style&type=&text/css&&&&&&td&{&width:150&}&&&&&&&&&&&&//给Td加上样式&/style&&table&align=¢er&&&&&&&&&&&tr&&&&&&&&&&&&&&td&colspan=&2&&width=&300&&&input&type=&checkbox&&name=&didian&/&地点&/td&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&colspan=&2&&width=&300&&&input&type=&checkbox&&name=&all&/&全部选择/全部取消&/td&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&beijing&/&北京&/td&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&shanghai&/&上海&/td&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&tianjin&/&天津&&/td&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&chongqing&/&重庆&/td&&&&&&&&&&/tr&&&&&&&&&&tr&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&shenzhen&/&深圳&/td&&&&&&&&&&&&&&td&&input&type=&checkbox&&&name=&guangzhou&/&广州&&/td&&&&&&&&&&/tr&&&&&&/table&
提问者评价
其他类似问题
为您推荐：
其他1条回答
&!DOCTYPE&HTML&&html&lang=&en-US&&&head&&meta&charset=&UTF-8&&&title&main.html&/title&&style&type=&text/css&&table&{ margin:&}table.t1,table.t2&{ width:&300}&/style&&script&type=&text/javascript&&src=&jquery-1.8.0.min.js&&&/script&&script&type=&text/javascript&& $&(function&()&&&&{
var&table2&=&$&('table.t2');
table2.hide&(); &&&&$&('td:contains(&\u&)').find&(':checkbox').change&(function&() &&&&{
&&&&$&(this).prop&('checked')&?&table2.show&()&:&table2.hide&(); &&&&}); &&&&$&('td:contains(&\u\u/\u\u53d6\u6d88&)').find&(':checkbox').change&(function&() &&&&{ &&&& table2.find&('tr:gt(0)').find&(':checkbox').prop&('checked',&$&(this).prop&('checked')); &&&&});&&&&});&/script&&/head&&body& &table&class=&t1&&
&td&&label&&input&type=&checkbox&&name=&didian&&/&点&/label&&/td&
&/tr& &/table& &table&class=&t2&&
&td&colspan=&2&&&label&&input&type=&checkbox&&name=&all&&/&全部选择/全部取消&/label&&/td&
&td&&label&&input&type=&checkbox&&name=&beijing&&/&北京&/label&
&td&&label&&input&type=&checkbox&&name=&shanghai&&/&海&/label&
&td&&label&&input&type=&checkbox&&name=&tianjin&&/&津&/label&
&td&&label&&input&type=&checkbox&&name=&chongqing&&/&重庆&/label&
&td&&label&&input&type=&checkbox&&name=&shenzhen&&/&深圳&/label&
&td&&label&&input&type=&checkbox&&name=&guangzhou&&/&广州&/label&
&/tr& &/table&&/body&&/html&
结构不能改，只有一个table.
加colspan，加width，自己加，写不下了
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁
