In the Fiddle below (found here: jsfiddle.net/5m0oLbqn/1/#collaborate), the inputs have the attribute name=" ". So for example, if an input has the attribute name="A" and is checked, all <td> elements containing the matching text "A" will be given the class "highlight".
Instead, I would like to check for classes instead. For example, if the input has the class "check-entry1", all <td> elements with the class "entry1" will be given the class "highlight". Is there a simple way to achieve this?
$('.selector').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if($(this).is(':checked')){ $("input:checkbox:not(:checked)",$(this).parents('form')).not(this).prop("checked","checked");
} else {
$("input:checkbox(:checked)",$(this).parents('form')).not(this).prop("checked","");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var checked = $(".selector:checked").map(function () {
return this.name
}).get()
$('td').removeClass("highlight").filter(function () {
return $.inArray($(this).text(), checked) >= 0
}).addClass("highlight")
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}body {
width:100%;
font: 80% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColLiqLt #container {
width: 99%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #FFFFFF;
text-align: center; /* this overrides the text-align: center on the body element. */
}
.twoColLiqLt #sidebar1 {
float: left;
width: 45%; /* since this element is floated, a width must be given */
background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 20px 0; /* top and bottom padding create visual space within this div */
}
.twoColLiqLt #sidebar1 h3, .twoColLiqLt #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
.twoColLiqLt #mainContent {
margin: 0 5px 0 60%; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
}
.highlight {background:#9ac99d;}
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
border-collapse:collapse; /* Keeps the table lines like in excel */
table-layout:fixed; /* Fits the table in the screen */
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #FFFFFF;
color: #FFF;
font-weight: bold;
}
</style>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLt #sidebar1 { padding-top: 5px; }
.twoColLiqLt #mainContent { zoom: 1; padding-top: 5px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
-->
</style><!--[if IE]>
<![endif]--><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="sidebar1">
<body class="twoColLiqLt">
<div id="container">
<div id="sidebar1">
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="A" class="selector" checked="checked" />A</label>
<label>
<input type="checkbox" name="B" class="selector" />B</label>
<label>
<input type="checkbox" name="X" class="selector" />X</label>
<label>
<input type="checkbox" name="Y" class="selector" />Y</label>
<label>
<input type="checkbox" name="Z" class="selector" />Z</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />Select All</label>
<label>
<input type="checkbox" name="K" class="selector" />K</label>
<label>
<input type="checkbox" name="J" class="selector" />J</label>
<label>
<input type="checkbox" name="M" class="selector" />M</label>
<label>
<input type="checkbox" name="T" class="selector" />T</label>
<label>
<input type="checkbox" name="N" class="selector" />N</label>
</form>
</div>
</div>
<div id="mainContent">
<h3 align="right"> </h3>
<div >
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th></th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th></tr>
<tr><td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>K</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>F</td>
<td>F</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><td> </td></tr>
<tr><td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>F</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><td> </td></tr>
<tr><td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="highlight">A</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>C</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><td> </td></tr>
<tr><td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>j</td><td> </td></tr>
<tr><td> </td>
<td>X</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>B</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><td> </td></tr>
<tr><td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>K</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><td> </td></tr>
<tr><td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>K</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><td> </td></tr>
<tr><td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>C</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><td> </td></tr>
</table>
</div>
</div>
<div align="right">
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
</div>
<!-- end #container --></div>
Aucun commentaire:
Enregistrer un commentaire