插件描述：弹出下拉多选
相关插件-弹出层,选择框
讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币
esports浪涛0
好用，不错，
1，内容多的时候弹出框会在屏幕顶部超出屏幕的地方展示；
2，建议增加收缩的初始状态；
3，建议增加自定义选择后显示文本的长度，现在是默认值10
点击滚动条弹出层会隐藏，没有滚轮的用户恐怕是没法用了
萧瑟~残阳0
其实修改一下还是可以的！
研发-袁方0
坚持-hold-you can change0
挺好的，正好需要用到，兼容要是再好点就好了
看着还真不错，不知道是否有3楼说的问题。先下载下来看看。
jacky03820
弹出位置有问题，而且弹出层内容的背景色没有完全覆盖。。
G?-DR?AGON? 19?88-08?1?80
看着还真不错，不知道是否有3楼说的问题。先下载下来看看。
看起来不错。下载用用看
不错的代码，正需要
tomhonsom0
很漂亮，多谢楼主分享。。。
darkblue210
真心不错，非常感谢！
弹出位置，自动计算的坐标不正确。请问怎么解决？
怎么才能下载呀，看着还不错，IE低版本不支持
感觉很实用,,jquery很强大,,帮了我大忙啊!正好这几天用!
xuxu8294750
能给我发一份这个弹出框代码吗？谢谢！
看起来效果不错，哪位大侠能给我发一份吗？谢谢
真的不错！
萧瑟~残阳0
不错，可以！
wyw20123wyw0
你好，可以发我一份吗？万分感谢
xi贯就――好0
挺好的，实用
看了演示 真的很不错，我这里100多个选项不知道能不能放的下
PROMULGATOR
关注作者 (12)
收藏此插件 (159)
我当前jQ币余额：正在获取..
已下载次数：613
所需jQ币：3写图片轮播，我们连续的点击左右滚动按钮的时候，在我们点击操作已经完成的情况下，动画还在执行之前的动画，直到完成你所有点击的次数事件之后才会停止。这样会导致滚动不准确，究其原因是因为上次的动画还没执行完毕，下一次的点击事件就开始了，会导致获取需要滚动的元素的left值不准确。那下面就列举出几个解决办法。一，在你的点击事件中加上一个判断，假设产生动画效果目标的是#leftBtn这个节点，那么你要加上这个判断if(!$(&#leftBtn&).is(&:animated&)){
它会确保你的动画只会在上一个动画结束后才能产生 ，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉。二，上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画；$(&#leftBtn&).stop(true,false).animate({...},1000);
这个会造成动画脱节不太美观，但是反应迅速，说到这里我们解释下stop（）这个函数的用法。stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。stop在新版jQuery中添加了2个参数：第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候个人比较喜欢使用stop(true,false);你好前端(web_caofenze)　
　文章为作者独立观点，不代表大不六文章网立场
的最新文章
在 ES6 中引入了一种新的字符串字面量 – 模板字符串，除了使用反引号 (`) 表示，它们看上去和普通的字本文将讨论使 JavaScript 函数更有表现力的两个特性：Rest 参数和参数默认值。Rest 参数通常什么是解构赋值？解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常从一开始箭头就是 JavaScript 的一部分，在第一个 JavaScript 中就建议将内联的脚本代码包Symbol 是什么？Symbols 不是图标，也不是指在代码中可以使用小图片：1let 写图片轮播，我们连续的点击左右滚动按钮的时候，在我们点击操作已经完成的情况下，动画还在执行之前的动画，直到完便于用户操作体验，除了加一个关闭按钮外，一般还会加一个点击弹窗外的空白处也能关闭弹窗的操作。1，推荐写法$(动画效果传统web页面上，我们常常使用jQuery animate()方法来实现页面元素的动画。在移动端，我通过判断浏览器的userAgent，用正则来判断是否是ios和Android客户端。代码如下：用自定义图片代替原生checkbox实现全选,删除以及提交的方法
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
UI妹子觉得原生的checkbox复选框太丑，非要用图片来代替，那就依她。做出来的效果类似这样：要代替原生的checkbox。 那么要实现原生checkbox能干的事。我们主要实现这几点就可以了。1.点击列表中的勾选图片。图片会变换成相反的。2.如果当前是全选状态，不勾选列表中的某一项，全选处的图片变成未勾选的状态。如果点击了某一项使列表成了全选的状态， 全选处的图片变成勾选状态。3.全选功能4.点击删除，能删除全部的勾选的图片。1.准备工作：因为要大量用到两个图片的切换，我们单独定义出来：var uncheckUrl = 'images/uncheck.png'; var checkUrl = 'images/check.png'; 2.点击列表中的勾选图片，图片变成相反的，并且可能引发 全选图片的变化。我们用on事件，因为列表中的信息是动态添加进去的。//点击复选框图片 $("#ul").on('click', 'li img', function(event) {
var imgDom = $(this);
if(imgDom.attr("src")==checkUrl){
$("#SelectAllImg").attr("src",uncheckUrl);
imgDom.attr("src",uncheckUrl);
imgDom.attr("src",checkUrl);
//上面部分是变换图片自身，下面部分是检测是否要变换全选图片。
//通过比较图片总数量与选中图片数量来决定。
var imgLength = $('#ul li img').
var checkLength = 0;
for (var i = 0; i &= imgL i++) {
if($('#ul li img').eq(i).attr("src") == checkUrl){
checkLength ++;
if(imgLength == checkLength){
$("#SelectAllImg").attr("src",checkUrl);
} }); 3.全选功能。改变全选图标的同时，改变所有图标，跟全选图标保持一致。//全选中的图标 $("#SelectAllImg").click(function() {
if($(this).attr("src")== checkUrl){
$(this).attr("src",uncheckUrl);
$("#ul li img").attr("src",uncheckUrl);
$(this).attr("src",checkUrl);
$("#ul li img").attr("src",checkUrl);
} }); 4.删除功能。 点删除按钮，删除勾选的图片所在的行。&注意：里面的循环是倒序循环。 这样处理的原因是：如果顺序循环，那么删除了前面的行，真实的imglength就变小了，所有后面的节点的索引值都发生了变化，往前移了， 而我们 eq(i)来删除序号为i的节点，就删除不到了。//删除选中的数据 $("#del").click(function() {
var imgLength = $('#ul li img').
var checkDom = '';
for (var i = imgLength - 1; i &= 0; i--) {
checkDom = $('#ul li img').eq(i);
if(checkDom.attr("src") == checkUrl){
checkDom.parent().remove();
}); 5.最后我们要提交表单的时候，如何处理呢？& 我们是用ajax提交还是直接表单submit提交呢？这里提供两种方案的思路。5.1 ajax思路，本人比较喜欢用ajax提交。类似这样，deviceIdArr就获取到了选中的框的 内容。 你要获取该列的id，也类似。var deviceIdArr = []; $('#ul li img').each(function() {
if($(this).attr('src') == checkUrl){
deviceid = trim($(this).parent().text());
deviceIdArr.push(deviceid);
} }); 5.2表单提交思路。在每一个图片checkbox的旁边，放上一个隐藏的真实checkbox。这样用户就看不到。每一次对选中图片进行修改的时候，都对应地修改相应隐藏checkbox的选中状态，最后提交的时候直接提交隐藏checkbox的状态就好。调试的时候可以让那些隐藏的checkbox显现出来，方便我们直观看到checkbox与图片的对应状态是否准确。6.一点优化意见。为了避免 第一次 点击 图片时 切换图片的延迟感，可 预加载 选中状态的图片 和 未选中状态的图片。&比如我们这个默认状态下会显示未选中的图标， 而选中状态的图标是没有显示的。 如果等点击的时候再来加载，就会有延迟感。解决办法，在页面底部加上这一句：&img src="images/check.png" style="display:"& 当然，也可以用CSSSprites精灵图。注：本文是使用了jQuery来用自定义图片代替原生checkbox复选框实现全选，删除，表单提交。换成原生也不难。以上就是小编为大家带来的用自定义图片代替原生checkbox实现全选,删除以及提交的方法全部内容了，希望大家多多支持脚本之家~
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
盖世人读书，第一要有志，第二要有识，第三要有恒；有志则断不甘为下流，有识则知学问无尽，不敢以一得自足，有恒则断无不成之事。---曾国藩
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net