新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

jquery对表单操作2

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

您大概感兴趣的篇章:

  • js的表单操作 轻便总计器
  • jQuery对表单的操作代码集结
  • js调控表单操作的常用代码小结

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:jquery对表单操作2

您可能还会对下面的文章感兴趣: