勾选多选框后弹出对应的输入框

思路:

  1. 静态或动态生成所有输入框,并隐藏
  2. 选中多选框后,让其显示
  3. 每一次点击都要进行一次遍历,对勾选或取消勾选的多选框对应的输入框进行显示和隐藏
    (多选框与输入框)
//渲染及隐藏被选中的查询多选框对应的输入框
function Querychecked() {
	$('input[type="checkbox"]').click(function() {
		if (this.checked) {
			 let that = $(this);
			 //输入框的类名
			$(".control-label").each(function() {
				//判断 输入框的label 与 选中多选框的内容 是否相同
				if ($(this).text() == that.val()) {
					//委托输入框的父亲显示出来
					$(this).parent().show(0,function(){
					})	
				}	
			})
		} 
		//需要else,没有选中需要隐藏
		else {	
			let that = $(this);
			// console.log(that)
			console.log($(this).val());
			$(".control-label").each(function() {
				if ($(this).text() == that.val()) {
					$(this).parent().hide(0,function(){
					})	
				}	
			})
		}
	})
}
发布了29 篇原创文章 · 获赞 8 · 访问量 1134

猜你喜欢

转载自blog.csdn.net/weixin_44523860/article/details/103264718