条件：
假设我有几个以字母A开头的值；然后是"B"，然后是"C"，依此类推……
如果我选择字母表"A"，它将显示用"A"表示的值。。。我将使用复选框选择由"A"列出的几行。现在，如果选择字母表B，我将使用复选框选择由"B"列出的几行，其他字母也是如此。。。
以下是我的要求：
1( 如果我返回到任何字母表过滤器，则所选复选框行应显示为已选中。。我的意思是，即使我在过滤器之间来回导航，它们也不应该被取消选择。
2( 此外，如果我选择了过滤器中的所有内容，则应显示我之前为每个字母表单独选择的复选框。他们不应该被取消选择。
如果你需要任何其他信息，请告诉我。提前谢谢。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Testing Page</title>
<meta name="description" content="File to generate strong passwords of a chosen length.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
<style>
</style>
</head>
<body style="font-size:11px;">
<div id="tabs" style="margin:24px;margin-top:48px;">
<form class="pure-form">
<select id="alpha" style="float:right;margin-top:4px;margin-right:8px;width:60px;">
<?php
for($i=65;$i<91;$i++) {
?>
<option value="<?= chr($i); ?>"><?= chr($i); ?></option>
<?php
}
?>
</select>
</form>
<ul>
<?php
for($i=65;$i<91;$i++) {
?>
<li><a href="#tabs-<?= chr($i); ?>" id="tablink-<?= chr($i); ?>"><?= chr($i); ?></a></li>
<?php
}
?>
</ul>
<?php
for($i=65;$i<91;$i++) {
?>
<div id="tabs-<?= chr($i); ?>">
<?php
for($j=65;$j<91;$j++) {
?>
<span style="margin-right:12px;border:1px solid #dedede;padding:4px;"><input type="checkbox" name="checkbox-<?= chr($i); ?><?= chr($j); ?>" id="checkbox-<?= chr($i); ?><?= chr($j); ?>"> <?= chr($i); ?>-<?= chr($j); ?></span>
<?php
}
?>
</div>
<?php
}
?>
</div>
<div id="tabs2" style="margin:24px;margin-top:48px;">
<form class="pure-form">
<select id="alpha2" style="float:right;margin-top:4px;margin-right:8px;width:60px;">
<?php
for($i=65;$i<91;$i++) {
?>
<option value="<?= chr($i); ?>"><?= chr($i); ?></option>
<?php
}
?>
</select>
</form>
<ul style="display:none;">
<?php
for($i=65;$i<91;$i++) {
?>
<li><a href="#tabs2-<?= chr($i); ?>" id="tablink2-<?= chr($i); ?>"><?= chr($i); ?></a></li>
<?php
}
?>
</ul>
<?php
for($i=65;$i<91;$i++) {
?>
<div id="tabs2-<?= chr($i); ?>">
<?php
for($j=65;$j<91;$j++) {
?>
<span style="margin-right:12px;border:1px solid #dedede;padding:4px;"><input type="checkbox" name="checkbox2-<?= chr($i); ?><?= chr($j); ?>" id="checkbox2-<?= chr($i); ?><?= chr($j); ?>"> <?= chr($i); ?>-<?= chr($j); ?></span>
<?php
}
?>
</div>
<?php
}
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
$( "#tabs2" ).tabs();
} );
$('#alpha').on('change',function(){
$('#tablink-' + $(this).val()).trigger('click');
});
$('#alpha2').on('change',function(){
$('#tablink2-' + $(this).val()).trigger('click');
});
</script>
</body>
</html>