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

jquery操作单选框，复选框，下拉列表 1. 复选框操作: Html代码 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 绑定事件 Js代码 $(document).ready(function() { $('#checkAll').click(checkAll); // 全选 $('#checkFootball').click(checkFootball); // 单选足球 }); $(document).ready(function() { $('#checkAll').click(checkAll); // 全选 $('#checkFootball').click(checkFootball); // 单选足球 }); 选中所有的。 这里分别提供了两种方式进行选中。具体参见API中的属性和表单选择器 Js代码 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 即可。 选中足球 Js代码 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. 单选按钮操作: Html代码 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 Js代码 $(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); }); 获得所选中的字母 Js代码 function getLetter() { alert('获得的字母为:' + $('[name= item ][checked=true]:radio').val()); } function getLetter() { alert('获得的字母为:' + $('[name= item ][checked=true]:radio').val()); } 3. 下拉框(列表)操作 Html代码 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= 清空列表 / 绑定事件，并为页面初始化数据 Js代码 $(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(); // 触发为列表添加元素事件 }); 追加元素 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 addOptions() { var selectContainer = $('#choose'); for (var i = 0; i 5; i++) { var option = $(' option /option ').text('choose' + i).val(i); selectContainer.append(option); } } 获得选中的元素 Js代码 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()); } 清空列表 Js代码 function clearOptions() { $('#choose').empty(); }