2009年10月27日星期二

jQuery获取textarea, text, radio, checkbox, select值

FROM: JQUERY获取text,areatext,radio,checkbox,select值

获取值



  • 文本框, 文本区域 $("#txt").attr("value");

  • 多选框 checkbox $("#checkbox_id").attr("value");

  • 单选组 radio $("input[@type=radio][@checked]").val();

  • 下拉框 select $('#sel').val();

  • 获取一组 radio 被选中项的值 var item = $('input[@name=items][@checked]').val();

  • radio 单选组的第二个元素为当前选中值 $('input[@name=items]').get(1).checked = true;

  • 获取 select 被选中项的文本 var item = $("select[@name=items] option[@selected]").text();

  • select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex = 1;



控制表单元素


文本框, 文本区域
[js]
$("#txt").attr("value",''); //清空内容
$("#txt").attr("value",'11'); //填充内容
[/js]

多选框 checkbox
[js]
$("#chk1").attr("checked",''); //不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
[/js]

单选组 radio
[js]
//设置value=2的项目为当前选中项
$("input[@type=radio]").attr("checked", '2');
[/js]

下拉框 select

[js]
$("#sel").attr("value",'-sel3'); //设置 value=-sel3 的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel") //添加下拉框的 option
$("#sel").empty();//清空下拉框
[/js]

A 遍历 option 和添加, 移除option
[js]
function changeShipMethod(shipping) {
var len = $("select[@name=ISHIPTYPE] option").length
if(shipping.value != "CA") {
$("select[@name=ISHIPTYPE] option").each(function() {
if($(this).val() == 111) {
$(this).remove();
}
});
} else {
$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
}
}
[/js]

B 取得下拉选项的值
[js]
$(#testSelect option:selected').text();
//or
$("#testSelect").find('option:selected').text();
//or
$("#testSelect").val();
[/js]


补充部分


下拉框

[js]
var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty(); //清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option
[/js]

解释: select[@name='country'] option[@selected] 表示具有 name 属性, 并且该属性值为 country 的 select 元素里面的具有 selected 属性的 option 元素; @ 开头的就表示后面跟的是属性.

单选框

[js]
$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)
[/js]

复选框

[js]
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});


$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾
[/js]

很郁闷, 用 jQuery 选择勾选上的复选框, 竟然在FF3.5下跑不了~
以前有问题也只是IE
在FF下, 还真是第一次碰到~
查了下资料~
真是我写法有问题, 汗~

没有评论 :

发表评论