2
私はあなたに爆発メッセージを送信するために電子メールを選択できるWebアプリケーションを作成しようとしています。私は、ユーザーが自分のメールを取り込むためにスカウト、親、リーダーの組み合わせを選ぶことを可能にするフィルターが欲しい。私はコードがうまくいかない理由を理解できません。JavaScriptの終わりと関係があると思いますが、わかりません。目標は、「フィルタ」チェックボックスがチェックされている場合は、ターゲットデータタイプを持つテーブル内のすべてのボックスをチェックします（「リーダー」が選択されている場合はすべて「リーダー」データタイプのチェックボックス以前は、行をなしとして表示し、行全体をデータ型に割り当てることでフィルターをかけようとしましたが、そのコードをバックアップするのを忘れました。フィルタJSプログラムが動作しない
次のようになります。
<div class = "SelectionContainer">
<div class = "FiltersContainer">
<ul id="filters">
<li>
<input type='checkbox' name='Filter' value="Leader" id="filter-Leader">
<label for="filter-Leader">Leaders</label>
</li>
<li>
<input type='checkbox' name='Filter' value="Parent" id = "filter-Parent">
<label for="filter-Parent">Parents</label>
</li>
<li>
<input type='checkbox' name='Filter' value="Scout" id = "filter-Scout">
<label for="filter-Scout">Scouts</label>
</li>
</ul>
</div>
<div class = "EmailsContainer">
<form action = "broadcasting.php" method = "get">
<table class = 'hubTable' id = 'FilterTarget'>
<tr class = 'tableheader'>
<td class = 'hubCell'>Email</td>
<td class = 'hubCell'>Name</td>
<td class = 'hubCell'>Type</td>
<td class = 'hubCell'>Subtype</td>
</tr>
<tr class = 'hubRow' >
<td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Scout' name='check_list[]' value='[email protected]' > [email protected] </td>
<td class = 'hubCell'>Biden, Mike </td>
<td class = 'hubCell' id = 'Type'>Scout </td>
<td class = 'hubCell' id = 'SubType'>Senior Patrol Leader </td>
</tr>
<tr class = 'hubRow' >
<td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Parent' name='check_list[]' value='[email protected]' > [email protected] </td>
<td class = 'hubCell'>Biden, Sue </td>
<td class = 'hubCell' id = 'Type'>Parent </td>
<td class = 'hubCell' id = 'SubType'>Unassigned </td>
</tr>
<tr class = 'hubRow' >
<td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Leader' name='check_list[]' value='[email protected]' > [email protected] </td>
<td class = 'hubCell'>smith, Michael </td>
<td class = 'hubCell' id = 'Type'>Leader </td>
<td class = 'hubCell' id = 'SubType'>Scout Master </td>
</tr>
<tr class = 'hubRow' >
<td class = 'hubCell'><input class = 'hubCheck' type='checkbox' data-type='Scout' name='check_list[]' value='[email protected]' > [email protected] </td>
<td class = 'hubCell'>Gill, Russel </td>
<td class = 'hubCell' id = 'Type'>Scout </td>
<td class = 'hubCell' id = 'SubType'>Patrol Leader </td>
</tr>
</table>
</form>
</div>
私はJSはそれを見つけることができるように、入力ボックスをwithingデータ型のタグを使用してフィルタリングしようとした私のJSコードは次のようになります。
var filterTarget = document.querySelectorAll(".hubCheck input[type="checkbox"]");
var filters = document.querySelectorAll("#filters li");
for (var i = 0; i < filters.length; i++){
filters[i].addEventListener("click", filterItems, false);
filters[i].checked = true;
}
function filterItems(e){
var clickedItem = e.target;
if (clickedItem.checked == true) {
document.getElementById("checkbox").checked = true;
} else if (clickedItem.checked == false) {
document.getElementById("checkbox").checked = false;
} else {
}
}
私はHTMLとPHPを使っているので、私は言語に精通していないので、JSのどこかにあるとエラーがあると思います。よりスマートで経験豊かな目のセットが大いに感謝されるでしょう。前もって感謝します！
あなたの代わりにフィルタ（LI）のfilterTarget（入力チェックボックス）に.checkedを設定する必要があると思います。 getElementByIdもチェックボックスをターゲットにしていません（それぞれ独自のIDを持っています） – softwarenewbie7331