javascript - jquery输入:checked show and hide div function

标签 javascript jquery html css jquery-ui

我正在尝试创建一个简单的 JQuery 函数。该功能有三个复选框和一个比较按钮。示例可以是Seen here

此函数的目标是当用户单击复选框 1 和 2 时,它会比较隐藏容器一和二的内容。当用户单击复选框 1 和 3 时,它会比较隐藏容器一和三的内容。

我无法让这个功能正常工作。我在下面添加了一段代码

   

	$(document).ready(function() {
		 var $checkboxes = $('[name^="check"]');
		 var $target = $('#target');
		 var $button = $('.compare');

		 $button.on('click', function() {
			 $('.data').hide();
			 $('.checkBox:checked').each(function() {
				 var div = $(this).attr('name');
				 $('.compare-block').find('.'+div).show();
			 })
		})
	})

最佳答案

我稍微改变了你的代码片段。您仅使用长度,但如果您想比较 1 和 3 或 X 和 Y,您需要知道选择了哪一个。

我所做的更改是,首先检查是否有多个要比较,然后,您会看到哪些。我编辑了一些 HTML 以添加一些 id

$(document).ready(function() {
  var $button  = $('.compare');

  $button.on('click', function() {
    var checkedLength = $('[name^="check"]:checked').length;
    $('#target .compare-block').hide();
    if (checkedLength > 1 ) {
      $( '[name^="check"]:checked' ).each(function() {
        //$(this).val() I use value, but you can use another thing
        $('#container'+$(this).val()).show();
      });
    }
  })
}); 

https://jsfiddle.net/t95kgzvx/4/

关于javascript - jquery输入:checked show and hide div function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37880271/

相关文章:

javascript - 你能在 JavaScript 中找到 Mod 2Pi 的东西吗?

javascript - jQuery 检查多个 CSV 列表

javascript - 根据 div 内的文本禁用提交按钮

javascript - jQuery 移动加载

javascript - PHP/HTML/JavaScript - 创建具有从 PHP 到 HTML/JavaScript 的数据属性的按钮

javascript - Android 上 TextInput 的奇怪行为 react native

javascript - meteor 收藏现场搜索

javascript - 无法从 JQuery 生成的 HTML 中检索数据属性

php - Laravel 5.0 显示登录访客和注册用户

javascript - jQuery 没有按预期修改 html