扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
可以参考下面的代码:
创新互联自2013年起,公司以网站设计、做网站、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户千余家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。
$(document).ready(function(){
varchecked=[];
$("#submitButton").click(function(){
$('input:checkbox:checked').each(function(){
checked.push($(this).val());
});
alert(checked);
});
});
扩展资料:
jquery参考函数
$(”元素名称”).html(”bnew stuff/b”); 给某元素设置内容
$(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值
$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式
$(”元素名称”).text(); 获得该元素的文本
$(”元素名称”).text(value); 设置该元素的文本值为value
参考资料来源:百度百科-jQuery
div id="checkbox2"
input name="cuser" type="checkbox" /复选框1
input name="cuser" type="checkbox" /复选框2
input name="cuser" type="checkbox" /复选框3
input name="cuser" type="checkbox" /复选框4
/div
var obj = document.getElementsByName("cuser");//得到复选框的元素
var check = [];
for (k = 0; k obj.length; k++) {//循环取值
if (obj[k].checked) {//取到选中的值
check.push(obj[k].value);
}
}
不知能否帮到你
1、checkbox日常jquery操作。
现在我们以下面的html为例进行checkbox的操作。
input id="checkAll" type="checkbox" /全选
input name="subBox" type="checkbox" /项1
input name="subBox" type="checkbox" /项2
input name="subBox" type="checkbox" /项3
input name="subBox" type="checkbox" /项4
全选和全部选代码:
script type="text/javascript"
$(function() {
$("#checkAll").click(function() {
$('input[name="subBox"]').attr("checked",this.checked);
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
});
});
/script
checkbox属性:
var val = $("#checkAll").val();// 获取指定id的复选框的值
var isSelected = $("#checkAll").attr("checked"); // 判断id=checkAll的那个复选框是否处于选中状态,选中则isSelected=true;否则isSelected=false;
$("#checkAll").attr("checked", true);// or
$("#checkAll").attr("checked", 'checked');// 将id=checkbox_id3的那个复选框选中,即打勾
$("#checkAll").attr("checked", false);// or
$("#checkAll").attr("checked", '');// 将id=checkbox_id3的那个复选框不选中,即不打勾
$("input[name=subBox][value=3]").attr("checked", 'checked');// 将name=subBox, value=3 的那个复选框选中,即打勾
$("input[name=subBox][value=3]").attr("checked", '');// 将name=subBox, value=3 的那个复选框不选中,即不打勾
$("input[type=checkbox][name=subBox]").get(2).checked = true;// 设置index = 2,即第三项为选中状态
$("input[type=checkbox]:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值
alert($(this).val());
});
2、radio的jquery日常操作及属性
我们仍然以下面的html为例:
input type="radio" name="radio" id="radio1" value="1" /1
input type="radio" name="radio" id="radio2" value="2" /2
input type="radio" name="radio" id="radio3" value="3" /3
input type="radio" name="radio" id="radio4" value="4" /4
radio操作如下:
$("input[name=radio]:eq(0)").attr("checked",'checked'); //这样就是第一个选中咯。
//jquery中,radio的选中与否和checkbox是一样的。
$("#radio1").attr("checked","checked");
$("#radio1").removeAttr("checked");
$("input[type='radio'][name='radio']:checked").length == 0 ? "没有任何单选框被选中" : "已经有选中";
$('input[type="radio"][name="radio"]:checked').val(); // 获取一组radio被选中项的值
$("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");// 设置value = 2的一项为选中
$("#radio2").attr("checked", "checked"); // 设置id=radio2的一项为选中
$("input[type='radio'][name='radio']").get(1).checked = true; // 设置index = 1,即第二项为当前选中
var isChecked = $("#radio2").attr("checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;
var isChecked = $("input[type='radio'][name='radio'][value='2']").attr("checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;
3、select下拉框的日常jquery操作
select操作相比checkbox和radio要相对麻烦一些,我们仍然以下面的html为例来说明:
select name="select" id="select_id" style="width: 100px;"
option value="1"11/option
option value="2"22/option
option value="3"33/option
option value="4"44/option
option value="5"55/option
option value="6"66/option
/select
看select的如下属性:
$("#select_id").change(function(){ // 1.为Select添加事件,当选择其中一项时触发
//code...
});
var checkValue = $("#select_id").val(); // 2.获取Select选中项的Value
var checkText = $("#select_id :selected").text(); // 3.获取Select选中项的Text
var checkIndex = $("#select_id").attr("selectedIndex"); // 4.获取Select选中项的索引值,或者:$("#select_id").get(0).selectedIndex;
var maxIndex =$("#select_id :last").get(0).index; // 5.获取Select最大的索引值
/**
* jQuery设置Select的选中项
*/
$("#select_id").get(0).selectedIndex = 1; // 1.设置Select索引值为1的项选中
$("#select_id").val(4); // 2.设置Select的Value值为4的项选中
/**
* jQuery添加/删除Select的Option项
*/
$("#select_id").append("option value='新增'新增option/option"); // 1.为Select追加一个Option(下拉项)
$("#select_id").prepend("option value='请选择'请选择/option"); // 2.为Select插入一个Option(第一个位置)
$("#select_id").get(0).remove(1); // 3.删除Select中索引值为1的Option(第二个)
$("#select_id :last").remove(); // 4.删除Select中索引值最大Option(最后一个)
$("#select_id [value='3']").remove(); // 5.删除Select中Value='3'的Option
$("#select_id").empty();
$("#select_id").find("option:selected").text(); // 获取select 选中的 text :
$("#select_id").val(); // 获取select选中的 value:
$("#select_id").get(0).selectedIndex; // 获取select选中的索引:
//设置select 选中的value:
$("#select_id").attr("value","Normal");
$("#select_id").val("Normal");
$("#select_id").get(0).value = value;
//设置select 选中的text,通常可以在select回填中使用
var numId=33 //设置text==33的选中!
var count=$("#select_id option").length;
for(var i=0;icount;i++)
{ if($("#select_id").get(0).options[i].text == numId)
{
$("#select_id").get(0).options[i].selected = true;
break;
}
}
通过上面的总结,应该对jquery的checkbox,radio和select有了一定的了解了吧,温故而知新,用多了就会变的熟练起来,即使有时候忘记了,也可以来翻一翻!
jquery的遍历方法可以获取复选框所欲的选中值
$("input:checkbox:checked").each(function(index,element)); // 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值
$("input:checkbox:checked").map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象
实例演示:点击按钮获取checkbox的选中值
创建Html元素
div class="box"
span点击按钮获取checkbox的选中值:/spanbr
div class="content"
input type='checkbox' name='message' value='1'/发送短信
input type='checkbox' name='message' value='2'/发送邮件
/div
input type="button" value="提交"
/div
设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
编写jquery代码
$(function(){
$("input:button").click(function() {
text = $("input:checkbox[name='message']:checked").map(function(index,elem) {
return $(elem).val();
}).get().join(',');
alert("选中的checkbox的值为:"+text);
});
});
复制的:
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; //定义变量
check.each(function(i){ //循环拼装被选中项的值
actor_config = actor+','+$(this).val();
});
alert(actor_config.substr(9)+',');
通过以下js代码去获取选中项的值,在IE7中可以正确取得选中项的值,但在IE8中却得不到选中项的值,同样在Firefox 3.5.3下也得不到值,但公司同事在Firefox其他较低版本下能正确得到值,IE6下也没有问题,⊙﹏⊙b汗
$('#permissionList-body input[name="checkboxes"][checked]').each(function(i){
alert($(this).val());
});
但是把技术代码修改为:
$('#permissionList-body input[name="checkboxes"]').each(function(i){
if(this.checked)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(this.checked)判断了 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/optionoption value='2'2222/option").appendTo("#sel")//添加下拉框的option $("#sel").empty();//清空下拉框// 清空所有复选框选项 $(":checkbox").attr("checked","");
1、新建一个html文件,命名为test.html。
2、在test.html文件内,在p标签内,使用input标签创建一个checkbox选项和一个文本框,并且文本框设置默认值。
3、在test.html文件内,给每一个checkbox类型input元素设置name属性,统一设置为ck,主要用于下面通过该name获得input对象。
4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“获得input值”。
5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行getinput()函数。
6、在js标签中,创建getinput()函数,在函数内,通过“:checked”选择器获得被选中的checkbox对象,使用next()方法获得checkbox相邻的input文本框对象,通过val()方法获得它的值。最后,使用alert()方法输出input的值。
7、在浏览器打开test.html文件,点击按钮,查看结果。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流