Jquery 输入：勾选显示和隐藏 div 功能答案

【问题标题】：Jquery input :checked show and hide div functionJquery 输入：勾选显示和隐藏 div 功能
【发布时间】：2016-06-17 21:59:51
【问题描述】：

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

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

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

   

	$(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();
			 })
		})
	})

【问题讨论】：

我注意到的第一件事是您定义了一个 $checkboxes 但实际上并没有使用它，而且有很多；失踪。这是所有的代码吗？
您的片段给出了错误“”消息“：“未捕获的 ReferenceError：$ 未定义”。请正确添加。
此外，您正在计算选中的复选框的数量，但您不跟踪哪些复选框（如果我选中 2 和 3 会发生什么）。在此示例中，还检查了四个复选框，而根据描述，页面上只有三个。

标签： javascript jquery html css jquery-ui

【解决方案1】：

我改变了一点你的 sn-p。您只使用长度，但如果您想比较 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/

【讨论】：