Jquery输入：选中show和hide div函数

Question

I am trying to create a simple JQuery function. This function has three check boxes and a compare button. Example can be Seen here

The objective of this function is when the user clicks on checkboxes 1 and 2 it compares the content of hidden containers one and two. When users clicks on checkboxes 1 and 3 it compares the content of hidden containers one and three.

I can't get this function get this working. I added a snippet of code below

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

Answer 1

I changed a bit your snippet. You are using only the length, but if you want to compare 1 and 3 or X and Y, you need to know wich ones are selected.

The changed I did, first you check if there is more than one to compare, and then, you see wich ones. I edited a bit the HTML to add some ids

$(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/