jQuery获取及设置单选框、多选框、文本框
获取一组radio被选中项的值 findKind 为单选框的值
var item = $("input[name='findKind']:checked").val();
var item = $("input[name='findKind']").val();
隐藏单选框
$("input[name='findKind']").hide();
获取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) //判断是否已经打勾
例:
var id_array=new Array();
$('input[name="id"]:checked').each(function(){
id_array.push($(this).val());//向数组中添加元素
});
var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
alert(idstr);
单选组radio: $("input[@type=radio]").attr("checked","2");//设置value=2的项目为当前选中项 (错
)
$("input[@name=radio_s][@value=16]").attr("checked",true);(测试通过)
下拉框select:
$("#sel").attr("value","-sel3");//设置value=-sel3的项目为当前选中项
$("11112222").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框
$("#select1")[0].options(index).selected = true; //使第index个option选中
$("#select1")[0].options(3).text //取索引为3的option值
比如
- <select class="type"></select>
1、设置value为1的项选中
$(".type").val("1");
2、设置text为管理组的项选中
- $(".type").find("option[text='管理组']").attr("selected",true);
中括号里的等号的前面是属性名称,不用加引号。
3、获取当前选中项的value
- $(".type").val();
4、获取当前选中项的text
- $(".type").find("option:selected").text();
select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。
如:
- $(".type1").change(function(){
- // 先清空第二个
- $(".type2").empty();
- // 实际的应用中,这里的option一般都是用循环生成多个了
- var option = $("<option>").val(1).text("1");
- $(".type2").append(option);
- });
1.判断select选项中 是否存在Value="paraValue"的Item
$("#selectid option[@value='paraValue']").length>0
2.向select选项中 加入一个Item
$("#selectid").append("<option value=''>1111<option>");
3.从select选项中 删除一个Item
$("#selectid").remove("<option value=''>1111<option>");
4.修改select选项中 value="paraValue"的text为"paraText"
$("#selectid option:selected").attr("value","paraValue").attr("text","paraText");
5. 设置select中text="paraText"的第一个Item为选中
$("#selectid option[@text='paraText']").attr("selected","true")
6.设置select中 value="paraValue"的Item为选中
$("#selectid option[@value='paraValue']").attr("selected","true")
7.设置select中第一 个Item为选中
$("#selectid option").eq(0).attr('selected', 'true');
8. 得到select的当前选中项的value
$("#selectid").val();
9.得到select的当前选中项的text
$("#selectid").text();
10. 得到select的当前选中项的Index
document.getElementById("select1").selectedIndex;
$("#selectid").get(0).selectedIndex
11. 清空select的项
$("#selectid").empty();
JS版本的:
- //1.判断select选项中 是否存在Value="paraValue"的Item
- function jsSelectIsExitItem(objSelect,objItemValue)
- {
- var isExit = false ;
- for ( var i=0;i;I++)
- {
- if (objSelect.options[i].value == objItemValue)
- {
- isExit = true ;
- break ;
- }
- }
- return isExit;
- }
- //2.向select选项中 加入一个Item
- function jsAddItemToSelect(objSelect,objItemText,objItemValue, objItemPos)
- {
- //判断是否存在
- if (jsSelectIsExitItem(objSelect,objItemValue))
- {
- alert( "该Item的 Value值已经存在" );
- }
- else
- {
- var varItem = new Option(objItemText,objItemValue);
- // objSelect.options[objSelect.options.length] = varItem;
- objSelect.options.add(varItem, objItemPos);
- alert( "成功加入" );
- }
- }
- //3.从select选项中 删除一个Item
- function jsRemoveItemFromSelect(objSelect,objItemValue)
- {
- //判断是否存在
- if (jsSelectIsExitItem(objSelect,objItemValue))
- {
- for ( var i=0;i;I++)
- {
- if (objSelect.options[i].value == objItemValue)
- {
- objSelect.options.remove(i);
- break ;
- }
- }
- alert( "成功删除" );
- }
- else
- {
- alert( "该 select中 不存在该项" );
- }
- }
- //4.修改select选项中 value="paraValue"的text为"paraText"
- function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
- {
- //判断是否存在
- if (jsSelectIsExitItem(objSelect,objItemValue))
- {
- for ( var i=0;i;I++)
- {
- if (objSelect.options[i].value == objItemValue)
- {
- objSelect.options[i].text = objItemText;
- break ;
- }
- }
- alert( "成功修改" );
- }
- else
- {
- alert( "该 select中 不存在该项" );
- }
- }
- //5.设置select中text="paraText"的第一个 Item为选中
- function jsSelectItemByValue(objSelect,objItemText)
- {
- //判断是否存在
- var isExit = false ;
- for ( var i=0;i;I++)
- {
- if (objSelect.options[i].text == objItemText)
- {
- objSelect.options[i].selected = true ;
- isExit = true ;
- break ;
- }
- }
- //Show出结果
- if (isExit)
- {
- alert( "成功选中" );
- }
- else
- {
- alert( "该 select中 不存在该项" );
- }
- }
- //6.设置select中value="paraValue"的Item 为选中
- document.all.objSelect.value = objItemValue;
- //7.得到select的当前选中项的value
- var currSelectValue = document.all.objSelect.value;
- //8.得到select的当前选中项的text
- var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
- //9.得到select的当前选中项的Index
- var currSelectIndex = document.all.objSelect.selectedIndex;
- //10.清空select的项
- document.all.objSelect.options.length = 0;
//遍历option和添加、移除option
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]"));
}
}
//取得下拉選單的選取值
$(#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();
//////////////////////////////////////////////////////////////////
记性不好的可以收藏下:
1,下拉框:
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
稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。
2,单选框:
$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)
3,复选框:
$("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){} //判断是否已经打勾
当然jquery的选择器是强大的. 还有很多方法.
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#selectTest").change(function()
{
//alert("Hello");
//alert($("#selectTest").attr("name"));
//$("a").attr("href","xx.html");
//window.location.href="xx.html";
//alert($("#selectTest").val());
alert($("#selectTest option[@selected]").text());
$("#selectTest").attr("value", "2");
});
});
</script>
<a href="#">aaass</a>
<!--下拉框-->
<select id="selectTest" name="selectTest">
<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>
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();//清空下拉框
相关推荐
本篇文章主要是对jquery对单选框,多选框,文本框等常见操作进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候...
18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...
表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最高的效率来完成这些表单的数据获取和数据提交。 注意:如果元素ID和服务器上获取的json字段
表单验证控件 支持文本框,密码框,下拉框,单选框,多选框,文本域以及对象等等的验证,包括必填,对比,正则等等验证 使用方法: 进行验证: $("#form").TsForm(); 清空表单: $("#form").TsFormReset(); 属性: minlength:...
context (Element, jQuery) : (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象。 示例 找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 HTML 代码: <p>one</p> <div><p>two</p></div> <p>three...
可结合Akismet过滤垃圾邮件,同时也支持CAPTCHA反垃圾邮件,表单域元素支持各种最常见的:单选框,复选框,文本框,下拉菜单等. Contact Form 7插件安装: 1.下载Contact Form 7插件,将压缩包解压后,把文件夹...
复选框.htm 表单复选框的用法。 密码框.htm 表单密码框的用法。 文本框.htm 表单文本框的用法。 文本域.htm 表单文本域用法。 下拉表.htm 表单下拉表的用法。 表单实例手把手....