文档章节

Jquery 操作Html 控件 CheckBox、Radio、Select 控件

h
 heiyexue
发布于 2014/06/22 12:29
字数 1628
阅读 100
收藏 19
点赞 0
评论 0


在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox、radio、select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一个全面的代码总结。

一、Jquery 对 CheckBox 的操作:

<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span> <input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span> <input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span> <input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>

1、查找控件:

(1) 选择所有的 checkbox  控件:
根据input类型选择: $("input[type=checkbox]")   等同于文档中的 $("input:checkbox")
根据名称选择:$("input[name=ckb]")

(2) 根据索引获取checkbox控件:
$("input:checkbox:eq(1)")
 结果返回:<input id="ckb2" name="ckb" value="1" type="checkbox" /><span>排球</span>

(3) 获得所有禁用的 checkbox 控件:
$("input[type=checkbox]:disabled") 
结果返回:
<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>
<input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span>
 

(4)获得所有启用的checkbox控件
$("input:checkbox[disabled=false]")
结果返回:
<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>
<input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span> 

(5)获得所有checked的checkbox控件
$("input:checkbox:checked") 
结果返回:
<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>
<input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" /><span>排球</span> 

(6)获取所有未checkd的checkbox控件
$("input:checkbox:[checked=false]") 
结果返回:
<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" /><span>乒乓球</span>
<input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" /><span>羽毛球</span> 

(7)获得value 为 0 的checkbox 控件
$("input[type=checkbox][value=0]") 
结果返回:
<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" /><span>篮球</span>

2、禁用:

(1)禁用所有的checkbox控件:
$("input:checkbox").attr("disabled", true) 

(2)启用某些禁用的 checkbox 控件:
$("input:checkbox:disabled").attr("disabled", false); 

(3)判断value=0的checkbox是否禁用:
    if ($("input[name=ckb][value=0]").attr("disabled") == true) {
          alert("不可用");
    }
   else {
         alert("可用");
    }

3、选择: 

(1)全选:
$("input:checkbox").attr("checked", true);

(2)全不选:
$("input:checkbox").attr("checked", false); 

(3)反选:
   $("input:checkbox").each(function () {
      if ($(this).attr("checked")) {
        //$(this).removeAttr("checked");
        $(this).attr("checked", false);
     }
     else {
       $(this).attr("checked",true);
    }
  });

4、取值:   

  function GetCkboxValues() {
    var str="";
   $("input:checkbox:checked").each(function () {
     switch ($(this).val()) {
      case "0":
             str += "篮球,";
             break;
     case "1":
             str += "排球,";
      break;
     case "2":
             str += "乒乓球,";
             break;
     case "3":
            str += "羽毛球,";
            break;
     }
   });
   str=str.substring(0, str.length - 1)
  }

二、Jquery 对 Radio 的操作:

<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span> <input name="edu" value="1" type="radio" /><span>本科</span> <input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span> <input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>

  1、查找控件:

(1)选择所有的 Radio控件
//根据input类型选择
$("input[type=radio]")  //等同于文档中的 $("input:radio")
//根据名称选择
$("input[name=edu]") 

(2)根据索引获得 Radio控件
$("input:radio:eq(1)")
结果返回:<input name="edu" value="1" type="radio" /><span>本科</span>

(3)获得所有禁用的 Radio 控件
$("input:radio:disabled") 
结果返回:
<input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>
<input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>

(4)获得所有启用的 Radio 控件
$("input:radio[disabled=false]")
结果返回:
<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>
<input name="edu" value="1" type="radio" /><span>本科</span>

(4)获得checked的 RadioButton 控件
$("input:radio:checked") //等同于 $("input[type=radio][checked]")
结果返回:
<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>

(5)获取未checked的 RadioButton 控件
$("input:radio[checked=false]").attr("disabled", true);
结果返回:
<input name="edu" value="1" type="radio" /><span>本科</span>
<input name="edu" value="2" type="radio" disabled="disabled" /><span>研究生</span>
<input name="edu" value="3" type="radio" disabled="disabled"/><span>博士生</span>

(6)获得value 为 0 RadioButton 控件
$("input[type=radio][value=0]") 
结果返回:<input name="edu" value="0" type="radio" checked="checked" /><span>专科</span>

2、禁用: 

(1)禁用所有的Radio
$("input:radio").attr("disabled", true);
或者 $("input[name=edu]").attr("disabled", true); 

(2)禁用索引为1的Radio控件
$("input:radio:eq(1)").attr("disabled", true); 

(3)启用禁用的Radio控件
$("input:radio:disabled").attr("disabled", false); 

(4)禁用当前已经启用的Radio控件
$("input:radio[disabled=false]").attr("disabled", true); 

(5)禁用 checked 的RadioButton控件
$("input[type=radio][checked]").attr("disabled", true); 

(6)禁用未checked 的RadioButton控件
$("input:[type=radio][checked=false]").attr("disabled", true); 

(7)禁用value=0 的RadioButton
$("input[type=radio][value=0]").attr("disabled", true); 

3、取值:

$("input:radio:checked").val()

4、选择:

(1)判断value=1 的radio控件是否选中,未选中则选中:
  var v = $("input:radio[value=1]").attr("checked");
  if (!v) {
  $("input:radio[value=1]").attr("checked", true);
  } 

(2)转换成Dom元素数组来进行控制选中:
$("input:radio[name=edu]").get(1).checked = true;

三、Jquery 对 Select 操作

复制代码
<select id="cmbxGame"> <option value="0" selected="selected">黑猫警长</option> <option value="1" disabled="disabled">大头儿子</option> <option value="2">熊出没</option> <option value="3">喜羊羊</option> </select>
复制代码

 1、禁用:

(1)禁用select 控件
$("select").attr("disabled", true);

(2)禁用select中所有option
$("select option").attr("disabled", true);

(3)禁用value=2 的option
$("select option[value=2]").attr("disabled", true);

(4)启用被禁用的option
$("select option:disabled").attr("disabled", false);

2、选择:

(1)option 值为 2 的被选择:
  var v = $("select option[value=2]").attr("selected");
  if (!v) {
  $("select option[value=2]").attr("selected", true);
  }

(2) 索引为 2 的option 项 被选择
$("select")[0].selectedIndex = 2;
或者 $("select").get(0).selectedIndex = 2; 
或者 $("select option[index=2]").attr("selected", true);

3、获取选择项的索引: 

(1)获取选中项索引: jq 中的 get 函数是将jq对象转换成了dom元素
 var selectIndex = $("select").get(0).selectedIndex; 
或者 var selectIndex = $("select option:selected").attr("index");

(2)获取最大项的索引:
var maxIndex = $("select option:last").attr("index") 
或者  var maxIndex = $("select option").length - 1

4、删除select 控件中的option 

(1)清空所有option
$("select option").empty(); 

(2)删除 value=2 的option
$("select option[value=2]").remove(); 

(3)删除第一个option
$("select option[index=0]").remove(); 

(4)删除 text="熊出没" 的option
$("select option[text=熊出没]").remove();  //此方法某些浏览器不支持用下面的方法替代

注意:each 中不能用break 用return false 代替,continue 用 return true 代替
$("select option").each(function () {
  if ($(this).text() == "熊出没") {
  $(this).remove();
  return false;
  }
});

5、在select中插入option 

(1)在首位置插入 option 并选择
$("select").prepend("<option value='0'>请选择</option>");
$("select option[index=0]").attr("selected", true); 

(2)在尾位置插入 option 并选择
$("select").append("<option value=\"5\">哪吒闹海</option>");
var maxIndex = $("select option:last").attr("index")
$("select option[index=" + maxIndex + "]").attr("selected", true); 

(3)在固定位置插入 比如第一个option 项之后插入 新的option 并选择
$("<option value=\"5\">哪吒闹海</option>").insertAfter("select option[index=0]");
或者$("select option[index=0]").after("<option value=\"5\">哪吒闹海</option>");
$("select option[index=1]").attr("selected", true);

6、取值:

  function GetCbxSelected() {
    var v = $("select option:selected").val();
    var t = $("select option:selected").text();
    alert("值:" + v + "文本:" + t);
}

© 著作权归作者所有

共有 人打赏支持
h
粉丝 2
博文 85
码字总数 78924
作品 0
哈尔滨
11个jQuery表单元素美化插件

因为浏览器兼容性的原因,表单元素往往是整个网页设计过程中最难以美化的,尤其是单选按钮、下拉选择框和复选框。不过我们可以通过jquery来美化它样。下面为大家推荐11个简单易用的jQurey插件...

晨曦之光
2012/03/09
0
0
jQuery操作radio、checkbox、select示例

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> function show() { //jquery获取单选框的值 alert($('input[type="radio"][nam......

娲城小将
2014/07/29
0
0
转-JQuery选择器及radio,checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元...

huntering
2015/08/25
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
Jquery给基本控件的取值、赋值

Jquery给基本控件的取值、赋值 Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'')...

瑞不可挡
2011/01/08
0
0
Jquery给基本控件的取值、赋值

Jquery给基本控件的取值、赋值 Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'')...

瑞不可挡
2011/02/21
0
0
jQuery ajax - serialize()方法以及常见问题

使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作! jQuery ajax - serialize() 方法定义和用法 serialize() 方法通过序列化表...

freedonn
2014/05/10
0
0
简单好用的表单校验插件——jQuery Validate基本使用方法总结

jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0 1.基本用法 从字面就知道既然是jquery的插件,首先得引入...

Gaia_bing
前天
0
0
jquery获取表单值的一些简单操作汇总

var mykindtxt=$("#kind option:selected").text();//获取表单selected 选中文本内容 jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作;假如我们有如下页面: <inpu...

小样
2012/02/17
0
0
ajax动态增加html节点时,jqm样式未加载出来,须实现refresh操作

在使用js或者jQuery获取控件(例如:button、checkbox、radiobutton等)的值时,也是需要先刷新,否则无法获取到最新的值。 下面列出常用的标签的refresh操作,其他的可以举一反三。 1. Lis...

杭城小刘
2015/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
5
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
165
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部