【js】复选框，复选下拉框，文本框勾连

【js】对常见事件的一个总结
ps: 内容涉及(kendo Ui, jQuery)

如下图所示：要求实现功能点
(1)用户名(复选下拉框，可选择多个)和用户名(文本输入框)相勾连
复选下拉框改变，文本框也改变；如果选择了用户名下拉框/用户名文本框，则用户名复选框为不被勾选状态
(2)如果点击了(用户名是否全选)复选框为已勾选状态，用户名复选下拉框及用户名文本框清空

keyup：触发事件

keyup：文本输入框输入内容/内容改变便触发该事件

 /*** templateuser3：文本输入框的id* getSe3：复选框*///当输入内容时，立即触发某事件，宜用onkeyup，onchange会有延时。$("#templateuser3").keyup(function(){if($('#templateuser3').val()!=""){//复选框改变选择状态(取消勾选)$('#getSe3').prop("checked",false);mySe3=false;}});

change改变事件

change：对dom进行改变之后触发改事件

/**
* inqu3_1-0-formworktemplate3_1：kendoUi的复选下拉框id
* getSe3：复选框Id
* RootgetUser：给复选下拉框添加下拉选项的集合
* mySe3：全局变量，判断复选框(getSe3)是否勾选
*/
$('#getSe3').on("change", function (e) {//判断复选框是否勾选if($("#getSe3").is(":checked")){mySe3=true;//清空复选下拉框(文本框)的选项document.getElementById("inqu3_1-0-formworktemplate3_1").length = 0;             //kendoUi的kendoMultiSelect(复选下拉框)var multiselect =$('#inqu3_1-0-formworktemplate3_1').data("kendoMultiSelect");//清空复选下拉框已勾选数据multiselect.setDataSource("");$('#templateuser3').val("");var aaa={data: RootgetUser};var dataSource1 = new kendo.data.DataSource(aaa);var multiselect2 =$('#inqu3_1-0- formworktemplate3_1').data("kendoMultiSelect");  //给复选下拉框添加下拉选项数据multiselect2.setDataSource(dataSource1);}else{mySe3=false;}});

click 点击事件

click：点击某个dom元素之后触发该事件

/**
* rootModel：点击按钮的id
* saveTemplate:kendoUi的弹窗id
*/
$("#rootModel").on('click', function () {var winAddUrl = $('#saveTemplate').data("kendoWindow");//打开弹窗winAddUrl.center().open();
});

【js】复选框，复选下拉框，文本框勾连相关推荐

java下拉菜单选择前弹提示框_javascript实现下拉提示选择框
本文介绍了select和sugget结合起来使用的例子,支持下拉的直接选择,也支持在下拉内容中输入过滤. 整体效果就是下面这样的: 1.首先需要引入如下文件这里要注意jquery要放在select2 ...
html设置下拉菜单文本框隐藏,下拉选择框onchange触发隐藏输入框
下拉选择框onchange触发隐藏输入框 window.οnlοad=function(){ var sel=document.getElementById("sel"); if ...
java文本框背景_用Java编写小程序（包含组合框下拉和文本框）变换背景颜色
展开全部代码如下:import java.awt.Color; import java.awt.Dimension; import java.awt.FlowLayout; import java. ...
jquery复选框选中及下拉框选中指定项(删除项)
(1)复选框选中及下拉框选中指定项(删除项) <%@ taglib prefix="form" uri="http://www.springframework.or ...
jquery可以勾选的下拉框_jquery.chosen下拉框多选插件使用详解_蓝戒的博客
Chosen 是一个支持jquery的selec t下拉框美化插件,它能让丑陋的.很长的selec t选择框变的更好看.更方便.不仅如此,它更扩展了selec t, 增加了自动筛选的功能.它可对列表 ...
下拉框系统甄选火星推荐_下拉框词工具都选16火星软件,下拉框词工具佳选23火星...
现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...
html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
jquery 将下拉框重置_select下拉框之默认选项清空
最近和小伙伴发现,select默认选项一般是提示信息,怎么才能让当我们点击下拉框时,可选的选项中没有默认的提示信息呢? 思路: 1.当点击下拉框时,让默认提示信息,即下拉框第一个选项移除. 2.当没有 ...
excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
在Excel表中,如何将增加下拉菜单的选项? excel中的下拉菜单选项,就是筛选的功能,具体操作如下: 1.首先选中a.b两列数据,在"开始"选项卡上选择"筛选&quo ...
[小黄书小程序]主页面标签栏水平滑动和下拉弹出框
上一章我们实现了小黄书小程序的搜索栏的界面呈现.这一章我们将会参考小红书实现搜索栏下面的标签栏. 该标签栏存在的意义是,用户可以根据选择的标签来快速呈现相关的内容.该标签栏界面主要是两个功能模块. 一 ...

【js】复选框，复选下拉框，文本框勾连

keyup：触发事件

change改变事件

click 点击事件

【js】复选框，复选下拉框，文本框勾连相关推荐

最新文章

热门文章