jquery对表单操作2_jquery
程序员文章站
2022-04-20 11:30:05
...
checkbox的级联效果
当单击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);
})
下拉框的应用
选中添加到右边
全部添加到右边
选中添加到左边
全部添加到左边
//将选中的选项添加给对方
$('#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')
复制代码 代码如下:
当单击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);
})
下拉框的应用
复制代码 代码如下:
选中添加到右边
全部添加到右边
选中添加到左边
全部添加到左边
//将选中的选项添加给对方
$('#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')
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
上一篇: 非递归实现PHP树的方法
下一篇: 详解使用CSS气泡框实现方法
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论