1、复选框全选操作：其实说到底就是对Jquery 选择器的运用，点我查看Jquery选择器 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> 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 == 'football') { this.checked = true; } }) } 注： 具体目的为了解决从后台取出数据，显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值，改用了JavaScript原生的 Dom 方法，将比创建 jQuery对象更有效 2. 单选按钮操作 html代码: 复制代码 代码如下: A B C D 您选择哪一个： <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 脚本: 复制代码 代码如下: $(document).ready(function() { // 数据初始化选择B。 $('[name="item"]:radio').each(function() { if (this.value == '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="添加数据"/> <input id="getSelectedOption" type="button" value="获得选中的值"/> <input id="clearOptions" type="button" value="清空列表"/> 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();//单选框

　　推荐阅读

　　jquery text()要注意啦

要注意的当然是我等jquery菜鸟.$.text()获取的是所有匹配元素的text，要注意的是$.text(val)会把里面的所有东西都删了（包括里面的html标签）再设置text，相当于$.html（val）。官方的说法是“Set the text conten>>>详细阅读

本文标题：jquery 操作单选框，复选框，下拉列表实现代码

地址：http://www.17bianji.com/kaifa2/JS/27813.html

 1/2    1