Multiple checkbox value checking and updated table data as a result

Question

I need to write a script to work with two groups of checkboxes, where the script handles the options from both sets and shows/hide rows of table data based on this.

What should happen is that you filter the table rows whenever you update the values in either set of checkboxes. The rows that remain should follow the logic of BOTH sets of checkboxes each time a change occurs in the selections from either set.

I am really stumped as to how you can make both sets work together, any pointers would be great please?

<form name="repaymentcalc" id="calcform" action="">

<section id="type">

  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t2" id="t2" checked/>Type 2<br>
  <input type="checkbox" name="type" value="t3" id="t3" checked/>Type 3<br>
  <input type="checkbox" name="type" value="t5" id="t5" checked/>Type 5<br>

</section>

<section id="fee">

  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="fee" id="fee" checked/>Fee<br>
  <input type="checkbox" name="fee" value="nofee" id="nofee" checked/>No Fee<br>

</section>

</form>

<table id="mortgagetable">
    
<thead>

<tr class="producthd"><th class="lenderhd">Lender</th><th class="typehd">Type</th><th class="feehd">Fee (£)</th></tr>

</thead>

<tbody>

<tr class="product"><td class="lender">Bank One<td class="t2">Type 2</td><td class="fee">1000</td></tr>
<tr class="product"><td class="lender">Bank Two<td class="t3">Type 3</td><td class="nofee">None</td></tr>
<tr class="product"><td class="lender">Bank Three<td class="t5">Type 4</td><td class="nofee">None</td></tr>

</tbody>

</table>

</html>

Answer 1

If one of properties are checked row is showed

var $products = $("#mortgagetable tbody > tr");
$products.hide();
var checked_arr = [];
$("input[type='checkbox']").change(function() {
  var $self = $(this);
  var checked = $self.prop("checked");
  var obj = $self.attr("data-type");
  if(checked){
        checked_arr.push(obj);
  }
  else
  {
		var poped = checked_arr.indexOf(obj);
        checked_arr.splice(poped,1);
  }
  $products.each(function(){//get tr data-types
    var to_split = $(this).attr("data-type");
	var attrs = [];
	attrs = to_split.split(",");
	
    for(var i=0; i<attrs.length; i++){
	    if($self.attr("data-type") == attrs[i]){
			if(checked){//checked
			   $(this).show();
			   return;
			}
			else{
				var count = 0;
				$(attrs).each(function(){
					
					if(checked_arr.indexOf(this.toString()) > -1){ //unchecked and is not in 
						count++;						//checked attributes array
					}	
				});
				if(!count)
					$(this).hide();
			}
        }
	}
  });
});

thead>tr{
    border-bottom: 1px solid black;
    display: inline-block;
}

td,th{
  width: 100px;
  display: inline-block;
}
th:nth-child(2n+1),td:nth-child(2n+1) {background: #CCC}{background-color: silver;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="repaymentcalc" id="calcform" action="">

<section id="type">

  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="t2" id="t2"  data-type="type2" />Type 2<br>
  <input type="checkbox" name="type" value="t3" id="t3" data-type="type3" />Type 3<br>
  <input type="checkbox" name="type" value="t5" id="t5" data-type="type5"  />Type 5<br>

</section>

<section id="fee">

  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="fee" id="fee" data-type="fee" />Fee<br>
  <input type="checkbox" name="fee" value="nofee" id="nofee" data-type="nofee" />No Fee<br>

</section>

</form>

<table id="mortgagetable">
    
<thead>

<tr class="producthd"><th class="lenderhd">Lender</th><th class="typehd">Type</th><th class="feehd">Fee (£)</th></tr>

</thead>

<tbody>

<tr class="product" data-type="type2,fee"><td class="lender">Bank One<td class="t2">Type 2</td><td class="fee">1000</td></tr>
<tr class="product" data-type="type3,nofee"><td class="lender">Bank Two<td class="t3">Type 3</td><td class="nofee">None</td></tr>
<tr class="product" data-type="type5,nofee"><td class="lender">Bank Three<td class="t5">Type 5</td><td class="nofee">None</td></tr>

</tbody>

</table>

Answer 2

I would handle this by dynamically generating the table, and when the radios are changed just re-render it.

var lenders = [{
  name: "Bank 1",
  type: "Type 2",
  fee: 0
}, {
  name: "Bank 2",
  type: "Type 3",
  fee: 0
}, {
  name: "Bank 3",
  type: "Type 5",
  fee: 1000
}];

function renderLenders() {
  var types = $("input[name=type]:checked").map(function() {
    return $(this).val();
  }).get();
  var fees = $("input[name=fee]:checked").map(function() {
    return $(this).val();
  }).get();

  var l = lenders.filter(function(item, index, array) {
    return types.indexOf(item.type) != -1;
  });

  l = l.filter(function(item, index, array) {
    return (
      (
        item.fee > 0 &&
        fees.indexOf("fee") != -1
      ) ||
      (
        item.fee == 0 &&
        fees.indexOf("nofee") != -1
      )
    );
  });

  var rows = "";
  for (var i = 0; i < l.length; i++) {
    rows += "<tr><td>" + l[i].name + "</td><td>" + l[i].type + "</td><td>" + ((l[i].fee > 0) ? l[i].fee : "None") + "</td></tr>";
  }
  $("#lenders").html(rows);
}
$(function(){
  renderLenders();
  $("input[type=checkbox]").on("click", function(){
    renderLenders();
  });
})

table, td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="type">
  <p id="Mortgage Type">Mortgage Type</p>
  <input type="checkbox" name="type" value="Type 2" checked/>Type 2<br>
  <input type="checkbox" name="type" value="Type 3" checked/>Type 3<br>
  <input type="checkbox" name="type" value="Type 5" checked/>Type 5<br>
</section>
<section id="fee">
  <p id="Fee">Fee</p>
  <input type="checkbox" name="fee" value="fee" checked/>Fee<br>
  <input type="checkbox" name="fee" value="nofee" checked/>No Fee<br>
</section>
<table>
  <thead><tr><td>Lender</td><td>Type</td><td>Fee</td></tr></thead>
  <tbody id='lenders'></tbody>
</table>