首页 > 代码库 > jqurey实现单选框 ,复选框,下拉列表

jqurey实现单选框 ,复选框,下拉列表

2024-07-31 09:04:05   218人阅读

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

<form>  
您爱好的运动是：  
<input type="checkbox" name="item" value="http://www.mamicode.com/football"/> football  
<input type="checkbox" name="item" value="http://www.mamicode.com/basketball"/> basketball  
<input type="checkbox" name="item" value="http://www.mamicode.com/badminton"/> badminton  
<input type="checkbox" name="item" value="http://www.mamicode.com/pingpong"/> pingpong  
<input type="button" id="checkAll" value="http://www.mamicode.com/全选"/>  
<input type="button" id="checkFootball" value="http://www.mamicode.com/选中足球"/>  
</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 =http://www.mamicode.com/= ‘football‘) > 
{  
this.checked = true;  
}  
})  
}  

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

A B C D 您选择哪一个：  
<input type="radio" name="item" value="http://www.mamicode.com/A"/>A  
<input type="radio" name="item" value="http://www.mamicode.com/B"/>B  
<input type="radio" name="item" value="http://www.mamicode.com/C"/>C  
<input type="radio" name="item" value="http://www.mamicode.com/D"/>D  
<input type="button" id="getLetter" value="http://www.mamicode.com/获得字母"/>  

初始化选中字母B 
Jquey js 脚本: 
复制代码代码如下:

$(document).ready(function() {  
// 数据初始化选择B。  
$(‘[name="item"]:radio‘).each(function() {  
if (this.value =http://www.mamicode.com/= ‘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="http://www.mamicode.com/添加数据"/>  
<input id="getSelectedOption" type="button" value="http://www.mamicode.com/获得选中的值"/>  
<input id="clearOptions" type="button" value="http://www.mamicode.com/清空列表"/>  

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();//单选框  

jqurey实现单选框 ,复选框,下拉列表


联系
我们