1、复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 
html代码:

复制代码代码如下:
<form> 
您爱好的运动是: 
<input type="checkbox" name="item" value="football"/> football 
<input type="checkbox" name="item" value="basketball"/> basketball 
<input type="checkbox" name="item" value="badminton"/> badminton 
<input type="checkbox" name="item" value="pingpong"/> pingpong 
<input type="button" id="checkAll" value="全选"/> 
<input type="button" id="checkFootball" value="选中足球"/> 
</form> 

Jquey js 脚本:

复制代码代码如下:
$('#checkAll').click (checkAll); // 全选 
$('#checkFootball').click (checkFootball); // 单选足球 
}); 
function checkAll() 

$('input [type="checkbox"][name="item"]').attr ("checked", true); 
// $('[name="item"]:checkbox').attr("checked", true); 

注: 全反选只需要将这里的 true 换成 false 即可。 
选中足球操作 
Jquey js 脚本:

复制代码代码如下:
function checkFootball() 

$(" [name='item']:checkbox").each(function () { 
if (this.value == 'football') 

this.checked = true; 

}) 

注: 具体目的为了解决从后台取出数据,显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值,改用了JavaScript原生的 Dom 方法,将比创建 jQuery对象更有效 
2. 单选按钮操作 
html代码:

复制代码代码如下:
A B C D 您选择哪一个: 
<input type="radio" name="item" value="A"/>A 
<input type="radio" name="item" value="B"/>B 
<input type="radio" name="item" value="C"/>C 
<input type="radio" name="item" value="D"/>D 
<input type="button" id="getLetter" value="获得字母 "/> 

初始化选中字母B 
Jquey js 脚本:

复制代码代码如下:
$(document).ready(function() { 
// 数据初始化选择B。 
$('[name="item"]:radio').each(function() { 
if (this.value == 'B') 

this.checked = true; 

}); 
// 绑定获得字母的事件 
$('#getLetter').click(getLetter); 
}); 

获得所选中的字母 
Jquey js 脚本:

复制代码代码如下:
function getLetter() 

alert('获得的字母为:' + $('[name="item"][checked=true]:radio').val()); 

3. 下拉框(列表)操作

复制代码代码如下:
<select multiple id="choose" style="width=100px;heigth=160px"></select> 
<input id="addOptions" type="button" value="添加数据"/> 
<input id="getSelectedOption" type="button" value="获得选中的值"/> 
<input id="clearOptions" type="button" value="清空列表"/> 

Jquey js 脚本:

复制代码代码如下:
$(document).ready(function() { 
$('#addOptions').click(addOptions); // 为列表添加元素 
$('#getSelectedOption').click(getSelectedOption); // 获得选中的元素 
$('#clearOptions').click(clearOptions); // 清楚列表中的元素 
$('#addOptions').click(); // 触发为列表添加元素事件 
}); 

追加元素 
Jquey js 脚本:

复制代码代码如下:
function addOptions() 

var selectContainer = $('#choose'); 
for (var i = 0; i < 5; i++) 

var option = $('<option></option>').text('choose' + i).val(i); 
selectContainer.append(option); 

获得选中的元素

复制代码代码如下:
function getSelectedOption() 

/* 逐个弹出每个元素 */ 
var options = $('#choose > option:selected'); 
$.each(options, function () { 
alert('option: ' + this.value); 
}); 
/* 逐个弹出每个元素,第一种的简写 */ 
$('#choose > option:selected').each(function() { 
alert('option2: ' + this.value); 
}); 
// 直接弹出数据, 如果是对下拉框,则直接弹出数据,如果是列表并且选择了多个数 
// 据,将数据以','分隔显示 
alert('val: ' + $('#choose').val()); 

清空列表

复制代码代码如下:
function clearOptions() 

$('#choose').empty(); 

常用的:

复制代码代码如下:
var ddl = $("#ddlDiaryType option:selected").text();//下拉别表 
var reb = $("#RbIfprivate [checked=true]:radio").val();//单选框 

转载:http://www.jb51.net/article/20627.htm

jquery 操作单选框,复选框,下拉列表实现代码的更多相关文章

  1. Python3+Selenium3+webdriver学习笔记8(单选、复选框、弹窗处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  2. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  3. jquery:获取checked复选框的问题

    jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...

  4. php一些单选、复选框的默认选择方法(示例)

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  5. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  6. jquery单选框 复选框表格高亮 选中

    单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...

  7. android 中单选和复选框监听操作

    单选按钮RadioGroup.复选框CheckBox都有OnCheckedChangeListener事件,我们一起了解一下. package com.genwoxue.oncheckedchange ...

  8. selenium+Python(定位 单选、复选框,多层定位)

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

  9. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  10. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 20141110的alltosun面试

    今天周一,是校招的第一天,心情有点紧张,不过可以和很多同学一起去,是我紧张的心情变得稍微安静些.面试进行的时候,是学长2哥面的我,总体感觉自己的表现很糟糕,在公共场合发表言论或者演讲,一直是我的一个弱 ...

  2. JAXB - java xml解析

    常用API JAXBContext类,是应用的入口,通过该类创建序列化和反序列化对象,也即编组对象和解组对象: Marshaller 编组接口,将Java对象序列化为XML数据: Unmarshall ...

  3. row_number over ()排序函数

    语法: row_number () over (排序规则)  计算每一行数据在结果集的行数 select ROW_NUMBER() over (order by FSalary) as 排序 ,*  ...

  4. 大数据篇:YARN

    YARN YARN是什么? YARN是一种新的 Hadoop 资源管理器,它是一个通用资源管理系统,可为上层应用提供统一的资源管理和调度,它的引入为集群在利用率.资源统一管理和数据共享等方面带来了巨大 ...

  5. PTA的Python练习题(四)

    从 第3章-1 3-1.大于身高的平均值 开始 1. 引入列表的概念 a=list(map(int,input().split())) b=sum(a) c=len(a) d=b/c for i in ...

  6. teraterm中log中加入时间戳

    步骤: 1.Setup->Additional settings->log->Timestamp(Local Time) 2.记录log.File->log(Teraterm. ...

  7. 关于阿里云ecs服务器无法用FTP进行连接问题

    背景 前两天趁机老马又搞优惠,就又撸了一台三年的ecs来折腾,后来整了半天发现ftp怎么都连接不上,以前也是撸过阿里的服务器,不过启动盘是巨硬家的系统, 最后发现虽然服务器的防火墙关了,但是老马为了安 ...

  8. GO 回调实现

    函数作为参数传递,实现回调. package main import "fmt" // 声明一个函数类型 type cb func(int) int func main() { t ...

  9. mysql 连接数据库时时区报错

    1.url: jdbc:mysql://192.168.0.101:3306/testdb?serverTimezone=UTC,在连接字符后面添加时区设置 2.使用navicat或者直接使用mysq ...

  10. jdk动态代理和cglib动态代理底层实现原理超详细解析(jdk动态代理篇)

    代理模式是一种很常见的模式,本文主要分析jdk动态代理的过程 1.举例 public class ProxyFactory implements InvocationHandler { private ...