확인란을 하나만 선택하면 확인란을 모두 선택 취소합니다.

Question

확인, 1, 2, 3, 4 및 5 확인란의 목록이 있습니다. 2, 3, 4 및 5를 선택하는 기능을 원하지만 1 2 번, 3 번, 4 번 및 5 번을 선택 해제하고 2 번에서 5 번을 선택 취소하면 div에 메시지가 표시됩니다.

지금까지 나는 하나와 다른 하나 ...를 선택하고 메시지가 1

문제의 선택에 제공 한 내가 캔트 않은 선택이 5 번 1을 선택

에

문제점 2 상자가 선택되지 않은 경우에도 페이지로드시 메시지가 표시됩니다. 메시지에 대해

$('input[name="CheckboxGroup1"]').on('click', function() { 
    if ($(this).is(":checked")) { 
    $('input.check').prop('checked', false); 
    } 
}) 

:

HTML

<input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked" /> 
one <br/> 

<input type="checkbox" class="check" /> 
two <br/> 

<input type="checkbox" class="check" /> 
three <br/> 

<input type="checkbox" class="check" /> 
four <br/> 

<input type="checkbox" class="check" /> 
five 

<div id="hidden">Two to five can not be selected whilst you have one selected</div> 

않은 선택 확인란 2-5 자바 스크립트는

$('input.check').on('change', function() { 
    $('input.check').not(this).prop('checked', false); 
}); 

$(document).ready(function(){ 
    $("#boxchecked").click(function() 
    { 
     if ($("#boxchecked").is(':checked')) 
     { 
      $("#hidden").show(); 
     } 
     else 
     { 
      $("#hidden").hide(); 
     }    
    }); 
}); 

$('input[name=CheckboxGroup1]').attr('checked', false); 

Answer 1

내가 제안하는 것입니다. 클래스를 단독으로 만 점검 할 수있는 체크 박스를 제공하는 것은 어떻습니까?
희망이 있습니다.

$('input[type="checkbox"]').on('click', function() { 
 
    if($(this).hasClass('singlecheck')) { 
 
     if($('input.multicheck').is(":checked")) { 
 
     $('#warning').show(); 
 
     } 
 
     $('input.multicheck').prop('checked', false); 
 
    } else { 
 
     $('input.singlecheck').prop('checked', false); 
 
     $('#warning').hide(); 
 
    } 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="singlecheck" value="one" name="CheckboxGroup1" id="boxchecked" /> 
 
one <br/> 
 

 
<input type="checkbox" class="multicheck" value="two"/> 
 
two <br/> 
 

 
<input type="checkbox" class="multicheck" value="three"/> 
 
three <br/> 
 

 
<input type="checkbox" class="multicheck" value="four"/> 
 
four <br/> 
 

 
<input type="checkbox" class="multicheck" value="five"/> 
 
five 
 

 
<div id="warning" style="display:none">Two to five can not be selected whilst you have one selected</div>

Answer 2

, 다음과 같이 사용할 수 있습니다 처음에 감춰지면 N은 필드의 가시성을 전환 if...else이 경우에, 또한

function initUI() { 
    $('input[name=CheckboxGroup1]').attr('checked', false); 
    $('#hidden').hide(); 
} 

Sample Fiddle

를 기본값으로 설정/UI 상태를 재설정 초기화 기능을 가지고, 당신은 사용해야 .toggle(VisibilityValue)

$("#boxchecked").click(function() { 
    $("#hidden").toggle($("#boxchecked").is(':checked')) 
}); 

Updated Fiddle

Answer 3

가능한 조치는 2-5 번까지 체크 박스를 사용하지 않도록 설정할 수 있다는 것입니다. 그는 체크 박스 1을 체크하고 메시지를 보여줍니다. 하나를 선택하지 않으면 당신은 다른 확인란을 활성화하고 같은 메시지를 숨길 수 있습니다 :

$('input[type="checkbox"]').on('change', function(){ 
 

 
    if($('#boxchecked').prop('checked')) { 
 
    $('.check').attr('disabled', true); 
 
    $('#hidden').show(); 
 
    } 
 
    else { 
 
    $('.check').removeAttr('disabled'); 
 
    $('#hidden').hide(); 
 
    } 
 
    
 
})

#hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked" /> 
 
one <br/> 
 

 
<input type="checkbox" class="check" /> 
 
two <br/> 
 

 
<input type="checkbox" class="check" /> 
 
three <br/> 
 

 
<input type="checkbox" class="check" /> 
 
four <br/> 
 

 
<input type="checkbox" class="check" /> 
 
five 
 

 
<div id="hidden">Two to five can not be selected whilst you have one selected</div>

여기

Answer 4

내가이 형 fuctionality싶은 생각 :

jQuery를

var box = null; 

$(document).ready(function() { 

    $(".check").click(function() { 


     box = this.id; 

     $(".check").each(function() { 
      if (this.id == box) 
      { 
       this.checked = true; 
       //$("#hidden").show(); 
       var cval =$(this).val(); 
       document.getElementById("get").innerHTML =cval; 
      } 
      else 
      { 
       this.checked = false; 

      };   
     }); 
    });  
}); 

HTML

<input type="checkbox" class="check" value="one" name="CheckboxGroup1" id="one" /> 
one <br/> 

<input type="checkbox" class="check" id="two" value="two" /> 
two <br/> 

<input type="checkbox" class="check" id="three" value="three" /> 
three <br/> 

<input type="checkbox" class="check" id="four" value="four" /> 
four <br/> 

<input type="checkbox" class="check" id="five" value="five" /> 
five 

<div id="hidden">This checkbox number is <label id="get">0</label></div> 

코드는 나는 그것의 유용한 당신