Posted in Javascript onApril 06, 2011
checkbox的级联效果
<form> 你爱好的运动?<br/> <input type="checkbox" id="CheckedAll" />全选/全不选<br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乓球球 <input type="button" id="send" value="提 交"/> $('#CheckedAll').click(function(){ $('[name=items]:checkbox').attr("checked", this.checked); })
当单击id为"CheckedAll"的复选框后,复选框组将被选中,当在复选框组中取消某一个选项的选中状态时,id为"CheckedAll"的复选框并没有被取消选中状态。
为解决这个问题:
$('[name=items]:checkbox').click( function(){ var flag = true; $('[name=items]:checkbox').each(function(){ if(!this.checked) flag = false; }); $('#CheckedAll').attr('checked', flag); }) //或者可以用复选框的总数与选中复选框数量相等 $('[name=items]:checkbox').click( function(){ var $tmp = $('[name=items]:checkbox'); //使用filter方法筛选出复选框,并直接给CheckedAll赋值 $('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length); })
下拉框的应用
<div class="content"> <select multiple id="select1" style="width:100px;height:100px;"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="6">选项6</option> <option value="7">选项7</option> </select> <div> <span id="add">选中添加到右边</span> <span id="add_all">全部添加到右边</span> </div> </div> <div class="content"> <select multiple id="select2" style="width:100px;height:100px;"> </select> <div> <span id="add">选中添加到左边</span> <span id="add_all">全部添加到左边</span> </div> <div> //将选中的选项添加给对方 $('#add').click(function(){ var $options = $('#select1 option:selected');//获取选中的选项 $options.appendTo('#select2');//追加给对方 }); //将全部的选项添加给对方 $('#add').click(function(){ var $options = $('#select1 option');//获取选中的选项 $options.appendTo('#select2');//追加给对方 }); //双击某个选项添加给对方 $('#select1').dblclick(function(){ var $options = $('option:selected',this);//获取选中的选项 $options.appendTo('#select2');//追加给对方 })
PS: $('option:selected',this),$()有2个参数,一个是选择器,一个是作用域。相当于$('#select1 option:selected')
jquery对表单操作2
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@