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操作表单控件的更多相关文章

  1. 前端 ----jQuery操作表单

    05-使用jQuery操作input的value值   表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用j ...

  2. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  3. Jquery Validation 验证控件的使用说明

    转载自:http://blog.csdn.net/huang100qi/article/details/52453970,做了一些简化及修改 下载地址:https://jqueryvalidation ...

  4. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  5. 前端笔记——如何控制表单控件中的disabled

    0.前言     本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如 ...

  6. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  7. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  8. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  9. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

随机推荐

  1. Hibernate(一)之Hibernate入门

    一.Hibernate入门 ssh框架体系结构 1.1.ORM框架 Hibernate是一个数据持久化层的ORM框架. Object:对象,java对象,此处特指JavaBean Relational ...

  2. MYSQL中 ENUM 类型的详细解释

    ENUM 是一个字符串对象,其值通常选自一个允许值列表中,该列表在表创建时的列规格说明中被明确地列举. 在下列某些情况下,值也可以是空串("") 或 NULL: 如果将一个无效值插 ...

  3. Mybatis基础学习(四)—关系映射

    一.模型分析 user和orders user---->orders 一个用户可以创建多个订单,一对多. orders--->user 一个订单只由一个用户创建,一对一.   orders ...

  4. JavaScript中的6种运算符总结

    JavaScript 运算符主要包括: 算术运算符 赋值运算符 比较运算符 三元运算符 逻辑运算符 字符串连接运算符 运算符 说明 例子 运算结果 + 加 y = 2+1 y = 3 - 减 y = ...

  5. python urllib模块

    1.urllib.urlopen(url[,data[,proxies]]) urllib.urlopen(url[, data[, proxies]]) :创建一个表示远程url的类文件对象,然后像 ...

  6. jQuery的发展史

    jQuery的发展史,你知道吗? 每天多学一点知识,就少写一行代码2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间).虽然过了这么久,但它依然以其简洁. ...

  7. HTML5的localStorage和sessionStorage

    HTMl5提供了sessionStorage和localStorage数据存储方法,用于临时或者永久的存储客户端的数据: sessionStorage:用于保存回话数据 localStorage:用于 ...

  8. TaintDroid简介

    1.Information-Flow tracking,Realtime Privacy Monitoring.信息流动追踪,实时动态监控. 2.TaintDroid是一个全系统动态污点跟踪和分析系统 ...

  9. 串口屏Modbus协议,串口屏的modbus协议资料,串口屏modbus通讯协议开发,串口屏之modbus协议使用技巧

    串口屏Modbus协议,串口屏的modbus协议资料,串口屏modbus通讯协议开发,串口屏之modbus协议使用技巧 本例程中用51单片机作为Modbus从机,从机的设备地址为2,从机有4个寄存器, ...

  10. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...