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>
<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); // 单选足球
- });
$(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);
- }
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;
- }
- })
- }
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="获得字母"/>
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);
- });
$(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());
- }
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="清空列表"/>
<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(); // 触发为列表添加元素事件
- });
$(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 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 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();
- }