확인란 설정/해제

확인란 설정/해제

다음 항목이 있습니다.

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

저는 그것을 원합니다.id="select-all-teammembers"이 옵션을 클릭하면 선택한 항목과 선택하지 않은 항목이 전환됩니다.코드가 아이디어? 어이디아?수줄코아?

다음과 같이 쓸 수 있습니다.

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

jQuery 1.6 이전에는 prop()가 아닌 tr()만 있었을 때 다음과 같이 썼습니다.

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

그렇지만prop()는 보더 나은의사용다니합을미론다보다 이 더 .attr()", 됩니다."boolean" HTML 특성경우이일상러선황호다됩니서에로으한적반할용적에▁when다선니호됩bo▁html▁isolebo서상"황에▁html▁preferred."▁this▁situation▁in▁usually.

//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

오래된 질문인 것은 알지만, 전환은 각 확인란이 무엇이든 간에 상태를 전환해야 한다는 것을 의미할 수 있다는 점에서 질문이 약간 모호했습니다.3개를 선택하고 2개를 선택하지 않은 경우 처음 3개를 선택하지 않고 마지막 2개를 선택합니다.

이를 위해 각 확인란의 상태를 전환하는 것이 아니라 모든 확인란의 상태를 동일하게 만들기 때문에 여기서 작동하는 솔루션은 없습니다.하고있다$(':checkbox').prop('checked')은 모든 많확란에논과 환반니다 사이의 합니다..checked그 중 경우 반환되는 값은 " " " 입니다. ", " " 입니다.false.

은 야합다니해를 사용해야 ..each()예를 들어, 모든 확인란을 동일하게 만드는 대신 각 확인란 상태를 실제로 전환하려는 경우.

   $(':checkbox').each(function () { this.checked = !this.checked; });

필하지않다니습요가 을 주의하세요.$(this)에서 취자내부서에로".checked속성이 모든 브라우저에 있습니다.

여기 당신이 원하는 또 다른 방법이 있습니다.

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

클릭을 유발하는 것이 더 간단하다고 생각합니다.

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 

내가 생각할 수 있는 최선의 방법.

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

또는

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});   

또는

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

다음 플러그인 사용:

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }

   }

그리고나서

$('#myCheckBox').toggleCheck();

jQuery 1.6에서는 발견된 각 요소의 선택된 상태를 전환할 수 있습니다.

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});

확인란을 전환해야 하는 이미지라고 가정하면 이 작업이 가능합니다.

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">

각 상자를 개별적으로 전환하려는 경우(또는 상자 하나만 작동하는 경우):

.each()를 사용하는 것이 좋습니다. 서로 다른 일이 발생하기를 원한다면 수정하기가 쉽고 여전히 비교적 짧고 읽기 쉽기 때문입니다.

예:

// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });

// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });

// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
    if(this.checked != x){ this.checked = x; $(this).change();}  
});

참고로...왜 모든 사람들이 .attr() 또는 .prop()를 사용하여 항목을 확인하는지 잘 모르겠습니다.

제가 알기로는, 요소.체크는 모든 브라우저에서 항상 동일하게 작동합니까?

Check-all 확인란은 특정 조건에서 자체적으로 업데이트되어야 합니다.'#select-all-teammembers'를 클릭한 후 몇 가지 항목을 선택 취소하고 select-all을 다시 클릭합니다.불일치를 볼 수 있습니다.이를 방지하려면 다음 방법을 사용합니다.

  var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  }); 

BTW 모든 확인란 DOM-object는 위에서 설명한 대로 캐시되어야 합니다.

가장 기본적인 예는 다음과 같습니다.

// get DOM elements
var checkbox = document.querySelector('input'),
    button = document.querySelector('button');

// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);

// when clicking the button, toggle the checkbox
function toggleCheckbox(){
  checkbox.checked = !checkbox.checked;
};

<input type="checkbox">
<button>Toggle checkbox</button>

html5 & 레이블이 있는 확인란을 선택하지 않고도 확인란을 전환할 수 있는 jQuery 방법은 다음과 같습니다.

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

  $("input[name='VIEW']:checkbox").change(function() {
    if($(this).is(':checked')) {  
         $("input[name='VIEW']:checkbox").prop("checked", false);
     $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
         $(this).prop("checked", true);
         $(this).parent('.normal').addClass('checked');
    }
    else{
         $("input[name='VIEW']").prop("checked", false);
         $("input[name='VIEW']").parent('.normal').removeClass('checked');
    }    
});

http://www.bootply.com/A4h6kAPshx

간단히 당신은 이것을 사용할 수 있습니다.

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});

jQuery("#checker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = true;
    });
});
jQuery("#dechecker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = false;
    });
});
jQuery("#checktoggler").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = !this.checked;
    });
});

;)

이렇게 쓸 수도 있습니다.

$(function() {
    $("#checkbox-toggle").click(function() {
        $('input[type=checkbox][name=checkbox_id\\[\\]]').click();
    });
});

사용자가 ID가 '#checkbox-togle'인 on 버튼을 클릭할 때 click event of checkbox를 호출하기만 하면 됩니다.

더 나은 접근 방식 및 UX

$('.checkall').on('click', function() {
   var $checks  = $('checks');
   var $ckall = $(this);

    $.each($checks, function(){
        $(this).prop("checked", $ckall.prop('checked'));
    });
});

$('checks').on('click', function(e){
   $('.checkall').prop('checked', false);
});

<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

시도:

$(".table-datatable .select_all").on('click', function () {
    $("input[name^='order']").prop('checked', function (i, val) {
        return !val;
    });
});

이것은 저에게 아주 잘 맞습니다.

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });

이 코드는 웹 템플릿에 사용되는 토글 스위치 애니메이터를 클릭할 때 확인란을 토글합니다.코드에서 사용 가능한 대로 ".onoffswitch-label"을 대체합니다."점심적인ID"는 여기서 전환되는 확인란입니다.

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});

다음을 수행하여 확인란을 설정 해제할 수도 있습니다.현재 사용 중bootstrap확인란 전환

<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>
<script src='https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js'></script>

<input type='checkbox' id='toggleScheduler' name='toggleScheduler' data-toggle='toggle'  data-on='Enabled'  data-off='Disabled'

$("#toggleScheduler").bootstrapToggle('on'); // enable toggle checkbox
$("#toggleScheduler").bootstrapToggle('off'); // disable toggle checkbox

내 생각에, 정상적인 변형을 제안한 가장 올바른 사람은 GigolNet Gigolashvili이지만, 나는 훨씬 더 아름다운 변형을 제안하고 싶습니다.확인해보세요

$(document).on('click', '.fieldWrapper > label', function(event) {
    event.preventDefault()
    var n = $( event.target ).parent().find('input:checked').length
    var m = $( event.target ).parent().find('input').length
    x = n==m? false:true
    $( event.target ).parent().find('input').each(function (ind, el) {
        // $(el).attr('checked', 'checked');
        this.checked = x
    })
})

각각 true 또는 false 대신에 'checked' 또는 null을 설정하면 작업이 수행됩니다.

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');

음, 더 쉬운 방법이 있습니다.

먼저 확인란에 클래스 예제 'id_chk'를 지정합니다.

그런 다음 'id_chk' 확인란 상태 입력을 제어하는 확인란 내부:

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

이상입니다. 이것이 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/4177159/toggle-checkboxes-on-off