JQuery操作表单控件
1.jquery操作radio
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
<title></title>
<!-- jquery判断哪个radio被选中 -->
<script type="text/javascript">
$(function(){
$('#button1').bind('click',function(){
var isChecked=$("input[name='radioall']").each(function(){
if($(this).attr('checked')=='checked'){
alert($(this).attr('value'));
}
});
});
});
</script>
<!-- jquery判断哪个radio被选中 -->
<script type="text/javascript">
$(function(){
$('#button1').bind('click',function(){
var value=$("input[name='radioall']:checked").val();
});
});
</script>
<!-- jquery选中取消radio -->
<script type="text/javascript">
2//选中
$(function(){
$('#button2').bind('click',function(){
$('#radio3').attr('checked',true);
});
//取消
$('#button3').bind('click',function(){
$('#radio3').attr('checked',false);
});
});
</script>
<!-- jquery获取radio属性 -->
<script type="text/javascript">
//获取值
$(function(){
$('#button4').bind('click',function(){
var value=$('#radio4').attr('value');
alert(value);
});
});
</script>
<script type="text/javascript">
//获取值用,分隔
$(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>
<script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
<title></title>
<!-- jquery判断哪个option被选中 -->
<script type="text/javascript">
$(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>
<!-- jquery选中option -->
<script type="text/javascript">
2//选中
$(function(){
$('#button2').bind('click',function(){
$("#select2 [value=99]").attr('selected','selected');
//$("#select2").attr("value",'88');设值有88的为选中项
});
});
</script>
<!-- jquery增加一个option -->
<script type="text/javascript">
2//选中
$(function(){
$('#button3').bind('click',function(){
$("<option id='15' value='155'>15</option>").appendTo("#select3")//添加下拉框的option
});
});
</script>
<!--移除一个option -->
<script type="text/javascript">
2//选中
$(function(){
$('#button4').bind('click',function(){
$("#select4 [value=133]").remove();
});
});
</script>
<!-- jquery清空option -->
<script type="text/javascript">
2//选中
$(function(){
$('#button5').bind('click',function(){
$("#select5").empty()
});
});
</script>
</head>
<body>
<p>1.jquery判断哪个option被选中，并且获取该值</p><input id="button1" type="button" value="button1"/>
<select id="select1" name="select1">
<option id="0" value="00"></option>
<option id="1" value="11">1</option>
<option id="2" value="22">2</option>
<option id="3" value="33">3</option>
<option id="4" value="44">4</option>
</select>
<hr/>
<p>2.jquery选中一个option</p><input id="button2" type="button" value="增加"/>
<select id="select2" name="select2">
<option id="5" value="55"></option>
<option id="6" value="66">6</option>
<option id="7" value="77">7</option>
<option id="8" value="88">8</option>
<option id="9" value="99">9</option>
</select>
<hr/>
<p>3.jquery增加一个option</p><input id="button3" type="button" value="增加"/>
<select id="select3" name="select3">
<option id="10" value="100"></option>
<option id="11" value="111">11</option>
<option id="12" value="122">12</option>
</select>
<hr/>
<p>4.移除option</p><input id="button4" type="button" value="移除"/>
<select id="select4" name="select4">
<option id="13" value="133">13</option>
<option id="14" value="144">14</option>
</select>
<hr/>
<p>5.清空option</p><input id="button5" type="button" value="清空"/>
<select id="select5" name="select5">
<option id="15" value="155"></option>
<option id="16" value="166">166</option>
<option id="17" value="177">177</option>
<option id="18" value="188">188</option>
<option id="19" value="199">199</option>
</select>
<hr/>
</body>
</html>
jquery操作checkbox
<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
<title>获取对象宽度</title>
<script type="text/javascript">
//判断是否选中
$(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>
<script type="text/javascript">
//选中
$(function(){
$('#button2').bind('click',function(){
$('#Checkbox2').attr('checked',true);
});
//取消
$('#button3').bind('click',function(){
$('#Checkbox2').attr('checked',false);
});
});
</script>
<script type="text/javascript">
$(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>
<script type="text/javascript">
//获取值
$(function(){
$('#button4').bind('click',function(){
var value=$('#Checkbox7').attr('value');
alert(value);
});
});
</script>
<script type="text/javascript">
//获取值用,分隔
$(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 ...
随机推荐
- WebService基础学习(一)—基础知识
一.WebService 1.什么是WebService Web Service(WEB服务)能够快捷和方便地综合结合各种系统.商务和任何应用平台.利用最新的Web Service 标准能够 ...
- Windows 解决mysql忘记密码怎么办？
MySQL有时候忘记密码了怎么办?我给出案例和说明!一下就解决了! Windows下的实际操作如下 1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysql ...
- JQuery分页插件封装（源码来自百度，自己封装）
最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...
- error C2664: “UINT GetDriveTypeW(LPCWSTR)”: 无法将参数 1 从“char [5]”转换为“LPCWSTR”
解决方法:右击项目选择属性--->配置属性--->常规,将字符集改为“使用多字节字符符集”,应用确定即可. 来自为知笔记(Wiz)
- 《Vue2.0 实践揭秘》终于出版啦！
不知不觉间在园子开博都两年多了,最近一些园友问最近去哪了为何都没有新的文章了.最近确实发生了很多的事,一是忙工作二就是忙着写书.这还得多些园子的小编,自两年前发表的"架构师修炼"系 ...
- python练习_12
题目:敏感词文本文件 filtered_words.txt,里面的内容 和 0011题一样,当用户输入敏感词语,则用 星号 * 替换,例如当用户输入「北京是个好城市」,则变成「**是个好城市」.(11 ...
- DirectFB 之 字体显示
通过本文,可以简单地了解directfb字体内部运行机制. 简介 SetFont函数,是每次写字体前必须调用的一个函数,否则directfb程序将会报错.这个函数是将某种字体与某个surface相关联 ...
- （知识点）JavaScript继承
1)原型链 ①原型链示例 function Shape() { this.name = 'shape'; this.toString = function(){ return this.name; } ...
- 当谈 SQL 优化时谈些什么？
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:孙银行 背景 Mysql数据库作为数据持久化的存储系统,在实际业务中应用广泛.在应用也经常会因为SQL遇 ...
- poj2100还是尺取
King George has recently decided that he would like to have a new design for the royal graveyard. Th ...