JQuery操作表单控件

1.jquery操作radio

<html>

<head>

$(function(){

$('#button1').bind('click',function(){

var isChecked=$("input[name='radioall']").each(function(){

if($(this).attr('checked')=='checked'){

alert($(this).attr('value'));

}

});

</script>

$(function(){

$('#button1').bind('click',function(){

var value=$("input[name='radioall']:checked").val();

});

</script>

2//选中

$(function(){

$('#button2').bind('click',function(){

$('#radio3').attr('checked',true);

});

//取消

$('#button3').bind('click',function(){

$('#radio3').attr('checked',false);

});

</script>

//获取值

$(function(){

$('#button4').bind('click',function(){

var value=$('#radio4').attr('value');

alert(value);

});

</script>

//获取值用,分隔

$(function(){

$('#button5').bind('click',function(){

var str='';

var value=$("input[name='Checkbox8']").each(function(){

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

str += $(this).attr('value')+',';

}

});

var index=str.lastIndexOf(',');

str=str.substring(0,index);

alert(str);

});

</script>

</head>

<body>

<p>1.jquery判断哪个radio被选中</p><input id="button1" type="button" value="button1"/>

<input type="radio" id="radio1" name="radioall" value="radio1"/>radio1

<input type="radio" id="radio2" name="radioall" value="radio2"/>radio2

<hr/>

<p>2.jquery选中取消一个radio</p><input id="button2" type="button" value="选中"/><input id="button3" type="button" value="取消"/>

<input type="radio" id="radio3" name="radio3" value="radio3"/>radio3

<hr/>

<p>4.jquery获取radio的值</p><input id="button4" type="button" value="获取"/>

<input type="radio" id="radio4" name="radio4" value="radio4"/>radio4

<hr/>

</body>

</html>

jquery操作select

<html>

<head>

$(function(){

$('#button1').bind('click',function(){

var text1=$('#select1 option:selected').text();

alert("text1是"+text1);

var text2=$("#select1").find('option:selected').text();//等同上

alert("text2是"+text2);

var text3=$("#select1").text();

alert("text3是"+text3);

var value1=$("#select1").val();

alert("value1是"+value1);

var value2=$('#select1 option:selected').attr('value');

alert("value2是"+value2);

});

</script>

2//选中

$(function(){

$('#button2').bind('click',function(){

$("#select2 [value=99]").attr('selected','selected');

//$("#select2").attr("value",'88');设值有88的为选中项

});

</script>

2//选中

$(function(){

$('#button3').bind('click',function(){

$("<option id='15' value='155'>15</option>").appendTo("#select3")//添加下拉框的option

});

</script>

2//选中

$(function(){

$('#button4').bind('click',function(){

$("#select4 [value=133]").remove();

});

</script>

2//选中

$(function(){

$('#button5').bind('click',function(){

$("#select5").empty()

});

</script>

</head>

<body>

<p>1.jquery判断哪个option被选中，并且获取该值</p><input id="button1" type="button" value="button1"/>

</select>

<hr/>

<p>2.jquery选中一个option</p><input id="button2" type="button" value="增加"/>

</select>

<hr/>

<p>3.jquery增加一个option</p><input id="button3" type="button" value="增加"/>

</select>

<hr/>

<p>4.移除option</p><input id="button4" type="button" value="移除"/>

</select>

<hr/>

<p>5.清空option</p><input id="button5" type="button" value="清空"/>

</select>

<hr/>

</body>

</html>

jquery操作checkbox

<html>

<head>

<title>获取对象宽度</title>

//判断是否选中

$(function(){

$('#button1').bind('click',function(){

var isChecked=$('#Checkbox1').attr('checked');

alert(isChecked);

if(isChecked=='checked'){

alert('选中了');

}

else if(typeof(isChecked)==undefined){

alert('未选中');

}/*

else if(typeof(isChecked)=='undefined'){

alert('未选中');

}*/

});

</script>

//选中

$(function(){

$('#button2').bind('click',function(){

$('#Checkbox2').attr('checked',true);

});

//取消

$('#button3').bind('click',function(){

$('#Checkbox2').attr('checked',false);

});

</script>

$(function(){

$('#Checkbox2').bind('click',function(){

if($(this).attr('checked')=='checked'){

$("input[name='Checkboxone']").each(function(){

$(this).attr('checked','checked');

//$(this).attr('checked',true); 效果一样?

});

}

});

$('#Checkbox2').bind('click',function(){

if($(this).attr('checked')==undefined){

$("input[name='Checkboxone']").each(function(){

$(this).attr('checked',false);

});

}

});

</script>

//获取值

$(function(){

$('#button4').bind('click',function(){

var value=$('#Checkbox7').attr('value');

alert(value);

});

</script>

//获取值用,分隔

$(function(){

$('#button5').bind('click',function(){

var str='';

var value=$("input[name='Checkbox8']").each(function(){

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

str += $(this).attr('value')+',';

}

});

var index=str.lastIndexOf(',');

str=str.substring(0,index);

alert(str);

});

</script>

</head>

<body>

<p>1.jquery判断checkbox是否被选中</p><input id="button1" type="button" value="button1"/>

<input type="Checkbox" id="Checkbox1" name="Checkbox1" value="Checkbox1"/>Checkbox1

<p>注意:若选中，则打印出的是chenked,没选中则为undefined</p>

<hr/>

<p>2.jquery选中取消一个checkbox</p><input id="button2" type="button" value="选中"/><input id="button3" type="button" value="取消"/>

<input type="Checkbox" id="Checkbox2" name="Checkbox2" value="Checkbox2"/>Checkbox2

<hr/>

<p>3.jquery全选/全取消</p>

<input type="Checkbox" id="Checkbox3" name="Checkboxall" value="Checkbox3"/>全选

<input type="Checkbox" id="Checkbox4" name="Checkboxone" value="Checkbox4"/>Checkbox4

<input type="Checkbox" id="Checkbox5" name="Checkboxone" value="Checkbox5"/>Checkbox5

<input type="Checkbox" id="Checkbox6" name="Checkboxone" value="Checkbox6"/>Checkbox6

<hr/>

<p>4.jquery获取checkbox的值</p><input id="button4" type="button" value="获取"/>

<input type="Checkbox" id="Checkbox7" name="Checkbox7" value="Checkbox7"/>Checkbox7

<hr/>

<p>5.jquery获取选中的checkbox的值组成字符串</p><input id="button5" type="button" value="获取"/>

<input type="Checkbox" id="Checkbox8" name="Checkbox8" value="Checkbox7"/>Checkbox8

<input type="Checkbox" id="Checkbox9" name="Checkbox8" value="Checkbox8"/>Checkbox8

<input type="Checkbox" id="Checkbox10" name="Checkbox8" value="Checkbox9"/>Checkbox8

<input type="Checkbox" id="Checkbox11"name="Checkbox8" value="Checkbox10"/>Checkbox8

</body>

</html>

JQuery操作表单控件的更多相关文章

前端 ----jQuery操作表单
05-使用jQuery操作input的value值表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等那么通过上节知识点我们了解到,我们在使用j ...
基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
Jquery Validation 验证控件的使用说明
转载自:http://blog.csdn.net/huang100qi/article/details/52453970,做了一些简化及修改下载地址:https://jqueryvalidation ...
vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
前端笔记——如何控制表单控件中的disabled
0.前言本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如 ...
如何给动态添加的form表单控件添加表单验证
最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

随机推荐

metools，不花一分钱就能拥有自己的工具站点？
需要[加密/解密][编码/解码][生成二维码]的时候不用再进百度点广告~ 也不需要去收藏夹找网址~ 我的目的大概就是如此. 项目地址:https://github.com/yimogit/metool ...
vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
vue2.0+elementUI构建单页面后台管理平台
git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
virtual box ubuntu 与Windows共享文件夹
由于懒得去截图了,直接抛链接.参考链接:http://www.cnblogs.com/lidabo/p/5317024.html 简介概括:首先安装增强功能,接着在virtual box的seting ...
Redis技术分享
环境介绍: 开发环境: spring3+tomcat7+maven3+redis-3.0.7 运行环境: Linux 前言: 项目中引入redis背景: 项目中最初将科目.打印.利润表.资产负债表.现 ...
在 Intellij 中设置集成 Jenkins 服务器连接
如何在 Intellij 中设置集成 Jenkins 服务器连接在Intellij中可以很方便的设置Jenkins服务器,不用登录到浏览器中,在Intellij中即可浏览所有job,开发plugin ...
2017最新苹果 APPLE ID注册流程
不管你是苹果开发者还是苹果爱好者,只要你手中有苹果的终端(IPHONE .IPAD .ITouch,MAC电脑) 你想用苹果的一些服务,你就必须要申请苹果APPLE ID,才能享受到苹果提供高品质的服 ...
Linq: Aggregate
Aggregate累加器今天看东西的时候看见这么个扩展方法Aggregate(累加器)很是陌生,于是乎查了查,随手记录一下. 直接看一个最简答的版本,其他版本基本没什么区别,需要的时候可看一下 pu ...
从JDBC到hibernate再到mybatis之路
一.传统的JDBC编程在java开发中,以前都是通过JDBC(Java Data Base Connectivity)与数据库打交道的,至少在ORM(Object Relational Mappin ...
APP品牌具体有哪几个要素？又是如何操作的？
对于品牌的一些认识首先我们要知道,品牌是由用户与公司及其产品&服务互动后所产生的,失去了与用户互动并且承认的是伪品牌,对于开发者来说,APP的品牌要先从标志与颜色考虑起,但实话实说,标志与颜 ...

JQuery操作表单控件

JQuery操作表单控件的更多相关文章

随机推荐

热门专题