2
폭발적인 메시지를 보내기 위해 이메일을 선택할 수있는 웹 앱을 만들려고합니다. 사용자가 스카우트, 학부모 및 리더를 섞어서 이메일을 가져올 수 있도록하는 필터가 필요합니다. 코드가 작동하지 않는 이유를 알 수 없습니다. 자바 스크립트의 끝과 관련이 있다고 생각하지만 잘 모르겠습니다. 목표는 "필터"확인란을 선택하여 대상 데이터 유형이있는 테이블의 모든 상자를 선택하고 확인란을 선택하지 않은 경우 (예 : "리더"를 선택하면 모든 "리더"데이터 유형 확인란 이전에 표에서 행을 없음으로 표시하고 전체 행을 데이터 유형에 할당하여 필터링하려고 시도했지만 작동했지만 그 코드를 백업하는 것을 잊었습니다.필터 JS 프로그램이 작동하지 않습니다.
내 HTML .
<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의 어딘가에 있다고 믿는다. 더 똑똑하고 경험 많은 눈 세트가 많이 감사 할 것입니다. 미리 감사드립니다.
가 대신 필터 (리)의 filterTarget (입력 체크 박스)에 .checked를 설정할 필요가 있다고 생각합니다. getElementById도 체크 박스를 대상으로하지 않습니다. (각각 자신의 ID가 있습니다) – softwarenewbie7331