怎样用 jquery选中多选框

怎样用 jquery选中多选框,第1张

var querycheck = "";

$("#aa")find("input[type=checkbox]")each(function(){

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

if(querycheck == ""){

querycheck += $(this)val();

} else {

querycheck += ","+$(this)val();

}

}

});

复制的:

HTML 代码:

<form>

<input type="checkbox" name="newsletter" checked="checked" value="Daily" />

<input type="checkbox" name="newsletter" value="Weekly" />

<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

</form>

jQuery 代码:

$("input:checked")

结果:

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

var check = $("input:checked"); //得到所有被选中的checkbox

var actor_config; //定义变量

checkeach(function(i){ //循环拼装被选中项的值

actor_config = actor+','+$(this)val();

});

alert(actor_configsubstr(9)+',');

通过以下js代码去获取选中项的值,在IE7中可以正确取得选中项的值,但在IE8中却得不到选中项的值,同样在Firefox 353下也得不到值,但公司同事在Firefox其他较低版本下能正确得到值,IE6下也没有问题,⊙﹏⊙b汗

$('#permissionList-body input[name="checkboxes"][checked]')each(function(i){

alert($(this)val());

});

但是把技术代码修改为:

$('#permissionList-body input[name="checkboxes"]')each(function(i){

if(thischecked)alert($(this)val());

});===========================================================================$('#permissionList-body input[name="checkboxes"][checked]')$('#permissionList-body input[name="checkboxes"][checked='checked']')这两种写法支持IE$('#permissionList-body input[name="checkboxes"][checked='true']')

这种支持firefox

没有找到好的解决方法,只有加if(thischecked)判断了 jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值var item = $('input[@name=items][@checked]')val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]")text();select下拉框的第二个元素为当前选中值$('#select_id')[0]selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]')get(1)checked = true;获取值:文本框,文本区域:$("#txt")attr("value");多选框checkbox:$("#checkbox_id")attr("value");单选组radio: $("input[@type=radio][@checked]")val();下拉框select: $('#sel')val();控制表单元素:文本框,文本区域:$("#txt")attr("value",'');//清空内容 $("#txt")attr("value",'11');//填充内容多选框checkbox: $("#chk1")attr("checked",'');//不打勾 $("#chk2")attr("checked",true);//打勾 if($("#chk1")attr('checked')==undefined) //判断是否已经打勾单选组radio: $("input[@type=radio]")attr("checked",'2');//设置value=2的项目为当前选中项下拉框select: $("#sel")attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 $("<option value='1'>1111</option><option value='2'>2222</option>")appendTo("#sel")//添加下拉框的option $("#sel")empty();//清空下拉框// 清空所有复选框选项 $(":checkbox")attr("checked","");

1、创建如下结构的测试文件-- Content,-- jquery-1113minjs,-- JquerySelecthtml。

2、获取下拉框选中值:使用val()。

3、获取下拉框选中文本:使用find("option:selected")text()。

4、获取下拉框选中项的索引:使用get(0)selectedIndex。

5、通过value值设置下拉框的选中项:使用val("value值")。

6、通过text值设置下拉框的选中项。

7、通过value值删除下拉框的一个选项。

8、通过text值删除下拉框的一个选项。

根据多选框name来获得选中的值可用如下 jquery代码实现

1

2

3

$("input:checkbox[name='test']:checked")each(function() { // 遍历name=test的多选框

$(this)val(); // 每一个被选中项的值

});

实例演示:给出两组多选框,点击按钮后分别获得两组中被选择的项目

示例代码如下

创建Html元素

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<div class="box">

<span>请输入用户名,限定字母、数字或下划线的组合:</span>

<div class="content">

<span>水果:</span>

<input type="checkbox" name="fruit" value="梨子"/>梨子

<input type="checkbox" name="fruit" value="李子"/>李子

<input type="checkbox" name="fruit" value="栗子"/>栗子

<input type="checkbox" name="fruit" value="荔枝"/>荔枝

<span>蔬菜:</span>

<input type="checkbox" name="vegetable" value="青菜"/>青菜

<input type="checkbox" name="vegetable" value="萝卜"/>萝卜

<input type="checkbox" name="vegetable" value="土豆"/>土豆

<input type="checkbox" name="vegetable" value="茄子"/>茄子

</div>

<input type="button" value="提交">

</div>

设置css样式

1

2

3

4

5

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='checkbox']{margin:5px;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

编写jquery代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$(function(){

// 设置属性值

$("input:button")click(function() {

var fruit = "";

var vegetable = "";

$("input:checkbox[name='fruit']:checked")each(function() {

fruit += $(this)val() + " ";

});

$("input:checkbox[name='vegetable']:checked")each(function() {

vegetable += $(this)val() + " ";

});

alert("已选择水果:"+fruit+",已选择蔬菜:"+vegetable);

});

})

观察效果

以上就是关于怎样用 jquery选中多选框全部的内容,包括:怎样用 jquery选中多选框、jquery怎么得到复选框值、jQuery如何获取复选框选中项后的文字等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9715358.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存