PHP下拉列表复选框,jQuery_jquery 操作单选框,复选框,下拉列表实现代码,1、复选框全选操作:其实说到 - phpStudy...

邵骁
2023-12-01

jquery 操作单选框,复选框,下拉列表实现代码

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

html代码:

复制代码 代码如下:

您爱好的运动是:

football

basketball

badminton

pingpong

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 您选择哪一个:

A

B

C

D

初始化选中字母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. 下拉框(列表)操作

复制代码 代码如下:

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 = $('').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();//单选框相关阅读:

怎么管理Suse Linux?

Js浏览器全屏代码(模仿按F11)

基于jQuery的让textarea支持Ctrl+Z步步撤销功能

用JavaScript打造搜索工具栏

IIS+Resin集成多个站点和数据库连接池

网页制作教程:制作拖拽翻页

彻底卸载MySQL的方法分享

生成缩略图

详解PHP显示MySQL数据的三种方法

PHP Session使用入门

IE缓存直接放在内存上进行读取

jquery中的 $("#jb51")与document.getElementById("jb51") 的区别

SQL Server_8525引擎错误怎么办?

java tapestry5 布局 参数的处理

 类似资料: