확인란이 모두 올바르게 작동하지 않습니다.

Question

양식 필드가 있습니다. 여기에 국가 및 기타 구성원이 포함 된 두 개의 필드가 있으며 두 필드 모두 확인란이 있습니다. 문제는 내가 모든 국가를 선택하는 데 사용하는 코드 (국가의 모든 확인란을 선택/선택 취소)도 구성원 필드를 확인하거나 선택 취소한다는 것입니다. 이 두 가지를 구별하여 회원 전용 필드의 확인란이 아닌 국가 만 확인합니다.

$("#checkCountries").click(function(){ 
    $('input:checkbox').not(this).prop('checked', this.checked); 
}); 

편집 : HTML 부분 여기

<tr> 
    <th>Target Memberships</th> 
    <td> 
     <div class="target-memberships col-sm-8"> 
     <input type="checkbox" value="1" name="memberships[]" checked> Standard<br> 
     <input type="checkbox" value="2" name="memberships[]" checked> Premium<br> 
     <input type="checkbox" value="3" name="memberships[]" checked> Elite<br> 
     </div> 
    </td> 
</tr> 
<tr> 
    <th>Target Countries</th> 
    <td> 
     <input type="checkbox" id="checkCountries" checked> Select All<br> 
     <div class="target-countries col-sm-8"> 
     <input type="checkbox" name="country[]" id="country" value="Afghanistan" checked> Afghanistan<br> 
     <input type="checkbox" name="country[]" id="country" value="Albania" checked> Albania<br> 
     <input type="checkbox" name="country[]" id="country" value="Algeria" checked> Algeria<br> 
     <input type="checkbox" name="country[]" id="country" value="American Samoa" checked> American Samoa<br> 
     <input type="checkbox" name="country[]" id="country" value="Andorra" checked> Andorra<br> 
     <input type="checkbox" name="country[]" id="country" value="Angola" checked> Angola<br> 
     </div> 
    </td> 
</tr> 

, 페이지에있는 모든 체크 박스에서 작동하는 코드를 만들고 여기에

내가 사용하고있는 코드입니다. 특정 분야 (국가)에서만 작동하도록 변경해야한다고 생각합니다. 도와주세요.

Answer 1

은 HTML이 같은 경우 :

<input type="checkbox" id="checkCountries" checked="checked"> Select All<br> 
<div class="target-countries col-sm-8"> 
    <input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br> 
    <input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br> 
    <input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br> 
    <input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br> 
    <input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br> 
    <input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br> 
</div> 

HTML, 각 id은 고유해야합니다. name은 배열을 정의해야하는 것과 같을 수 있지만 country[]이지만, id은 각 요소마다 고유해야합니다. input에는 닫는 태그가 없으므로 태그 끝 부분에 예를 들어 <input type="checkbox" />을 추가하는 것이 가장 좋습니다.

이를 사용할 수 있습니다

$("#checkCountries").click(function(){ 
    $(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked")); 
}); 

이것은 클래스 선택 target-countries 및 유형 checkbox의있는 내 input 요소를 대상으로합니다. 그런 다음 속성 checked을 설정하여 현재 확인란의 값과 일치시킵니다.

작업 발췌문 :

$(function() { 
 
    $("#checkCountries").click(function() { 
 
    $(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked")); 
 
    }); 
 
});

.target-countries { 
 
    margin: 3px; 
 
    border: 1px solid #CCC; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br> 
 
<div class="target-countries col-sm-8"> 
 
    <input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br> 
 
    <input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br> 
 
    <input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br> 
 
    <input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br> 
 
    <input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br> 
 
    <input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br> 
 
</div>

희망하는 데 도움이됩니다.