확인란 메뉴에 '유일한'버튼을 만드는 방법은 무엇입니까?

Question

가장 가까운 체크 박스를 제외한 모든 메뉴 (모든 메뉴 내)를 선택 해제하는 체크 박스 메뉴에 '전용'버튼을 만들려고합니다.

나는 작동하는 몇 가지 코드를 가지고 있지만, 그것은 해킹의 일종 대신 내가 좋아하는 1 개 라인 뭔가 말씀을 전합니다 :

• 경우 $ (이) .closest ('. 또한

같이 체크 박스를 떠나 다른, 다음 취소checked입니다 입력 ')'). (찾기 ', 나는 사용자가 실제로 CL로 발사 할 수있는 이벤트가 필요합니다 icked (triggerHandler)입니까?

$('.only').on('click', function() { 
 

 
    $(this).closest('.checkbox').find('input').prop('checked', false); 
 
    $(this).closest('.row').find('input').prop('checked', true); 
 
    $(this).closest('.checkbox').find('input').prop('checked', false); 
 
    $(this).closest('.row').find('input').trigger('click'); 
 
});

.only { 
 
    border: 1px solid rgb(115, 135, 156); 
 
    float: right; 
 
    border: 1px; 
 
    border-radius: 5px; 
 
    padding-right: 7px; 
 
    padding-left: 7px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
        <div class="row"> 
 
         <div class="right"> 
 
         <div class="only">only</div> 
 
         </div> 
 
        <label> 
 
         <input name="countryOriginMenu" value="Not provided" checked="checked" type="checkbox"> 
 
         <span>Frist</span> 
 
        </label> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="right"> 
 
         <div class="only">only</div> 
 
         </div> 
 
        <label> 
 
         <input name="countryOriginMenu" value="Not provided" checked="checked" type="checkbox"> 
 
         <span>Second</span> 
 
        </label> 
 
        </div> 
 
        <div class="row"> 
 
         <div class="right"> 
 
         <div class="only">only</div> 
 
         </div> 
 
        <label> 
 
         <input name="countryOriginMenu" value="Not provided" checked="checked" type="checkbox"> 
 
         <span>Third</span> 
 
        </label> 
 
        </div> 
 
        
 
</div>

https://jsfiddle.net/2m0cu795/

:

Answer 1

당신은 잘못된 이벤트를 트리거를 이용 변화 중복 행을 제거합니다. 참고 : "클릭"을 실행하면 값이 변경되지만 "변경"은 변경되지 않습니다.

$('.only').on('click', function() { 
    $(this).closest('.checkbox').find('input[type="checkbox"]').prop('checked', false); 
    $(this).closest('.row').find('input[type="checkbox"]').prop('checked', true).trigger('change'); 
}); 

다른 방법으로는, 현재 사람의 값을 변경할 수 없습니다, 어떤 값 (유일한) 하나 : 다른 체크 박스에

$('.only').on('click', function() { 
    var cb = $(this).closest('.checkbox').find('input[type="checkbox"]'); 
    var me = $(this).closest('.row').find('input[type="checkbox"]'); 
    cb.not(me).prop('checked', false); 
    me.trigger('change'); 
}); 

또는 트리거를 수행합니다 (그들은 사람이 있기 때문에 변경)

cb.not(me).prop('checked', false).trigger('change'); 

Answer 2

클릭에 :

• 는 그렇지 않은 경우에 현재를 확인합니다.
• 현재 항목을 제외한 모든 항목의 선택을 취소하십시오.

이 jsfiddle 참조 : https://jsfiddle.net/4bjtuunr/5/

$('.only').on('click', function() { 
    var $current = $(this).closest('.row').find('input'); 
    var $cbxs = $(this).closest('.checkbox').find('input'); 
    $current.prop('checked', true); 
    $cbxs.not($current).prop('checked', false); 
}); 

Answer 3

사용 방법은 어떻습니까? 이렇게하면 검사 할 조건이 너무 많이없이 현재의 확인란의 상태를 유지하는 데 도움이됩니다.

var row = $(this).parents(".row"); 
    row.siblings().find('input').prop('checked', false); 
    row.find('input').prop('checked', true); 

https://jsfiddle.net/ydzbddd5/4/