jquery 操作单选框，复选框，上拉列表

jquery 操作单选框，复选框，下拉列表

1. 复选框操作：

<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>


绑定事件

?
$(document).ready(function() { $('#checkAll').click(checkAll);// 全选 $('#checkFootball').click(checkFootball); // 单选足球});


选中所有的。 这里分别提供了两种方式进行选中。具体参见API中的属性和表单选择器

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


注： 全反选只需要将这里的 true 换成 false 即可。

选中足球

?
function checkFootball(){ $("[name='item']:checkbox").each(function() { if (this.value == 'football') { this.checked = true; } })}


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

2. 单选按钮操作：

?
A B C D 您选择哪一个：<br/><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

?
$(document).ready(function() { // 数据初始化选择B。 $('[name="item"]:radio').each(function() { if (this.value == 'B') { this.checked = true; } }); // 绑定获得字母的事件 $('#getLetter').click(getLetter);});


获得所选中的字母

?
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="清空列表"/>


绑定事件，并为页面初始化数据

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


追加元素

?
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());}


清空列表

?