|
|
html代碼:
復(fù)制代碼 代碼如下:
<form>
您愛(ài)好的運(yùn)動(dòng)是：
<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 腳本:
復(fù)制代碼 代碼如下:
$('#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 腳本:
復(fù)制代碼 代碼如下:
function checkFootball()
{
$(" [name='item']:checkbox").each(function () {
if (this.value == 'football')
{
this.checked = true;
}
})
}
注： 具體目的為了解決從后臺(tái)取出數(shù)據(jù)，顯示。這里并沒(méi)有用jQuery的attr()和val()方法來(lái)設(shè)置選中和獲得當(dāng)前checkbox的值，改用了JavaScript原生的 Dom 方法，將比創(chuàng)建 jQuery對(duì)象更有效
2. 單選按鈕操作
html代碼:
復(fù)制代碼 代碼如下:
A B C D 您選擇哪一個(gè)：
<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 腳本:
復(fù)制代碼 代碼如下:
$(document).ready(function() {
// 數(shù)據(jù)初始化選擇B。
$('[name="item"]:radio').each(function() {
if (this.value == 'B')
{
this.checked = true;
}
});
// 綁定獲得字母的事件
$('#getLetter').click(getLetter);
});
獲得所選中的字母
Jquey js 腳本:
復(fù)制代碼 代碼如下:
function getLetter()
{
alert('獲得的字母為：' + $('[name="item"][checked=true]:radio').val());
}
3. 下拉框(列表)操作
復(fù)制代碼 代碼如下:
<select multiple id="choose" style="width=100px;heigth=160px"></select>
<input id="addOptions" type="button" value="添加數(shù)據(jù)"/>
<input id="getSelectedOption" type="button" value="獲得選中的值"/>
<input id="clearOptions" type="button" value="清空列表"/>
Jquey js 腳本:
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$('#addOptions').click(addOptions); // 為列表添加元素
$('#getSelectedOption').click(getSelectedOption); // 獲得選中的元素
$('#clearOptions').click(clearOptions); // 清楚列表中的元素
$('#addOptions').click(); // 觸發(fā)為列表添加元素事件
});
追加元素
Jquey js 腳本:
復(fù)制代碼 代碼如下:
function addOptions()
{
var selectContainer = $('#choose');
for (var i = 0; i < 5; i++)
{
var option = $('<option></option>').text('choose' + i).val(i);
selectContainer.append(option);
}
}
獲得選中的元素
復(fù)制代碼 代碼如下:
function getSelectedOption()
{
/* 逐個(gè)彈出每個(gè)元素 */
var options = $('#choose > option:selected');
$.each(options, function () {
alert('option: ' + this.value);
});
/* 逐個(gè)彈出每個(gè)元素，第一種的簡(jiǎn)寫(xiě) */
$('#choose > option:selected').each(function() {
alert('option2: ' + this.value);
});
// 直接彈出數(shù)據(jù)， 如果是對(duì)下拉框，則直接彈出數(shù)據(jù)，如果是列表并且選擇了多個(gè)數(shù)
// 據(jù)，將數(shù)據(jù)以'，'分隔顯示
alert('val: ' + $('#choose').val());
}
清空列表
復(fù)制代碼 代碼如下:
function clearOptions()
{
$('#choose').empty();
}
常用的：
復(fù)制代碼 代碼如下:
var ddl = $("#ddlDiaryType option:selected").text();//下拉別表
var reb = $("#RbIfprivate [checked=true]:radio").val();//單選框
JavaScript技術(shù)：jquery 操作單選框，復(fù)選框，下拉列表實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
