Включение/выключение флажков

у меня есть следующие:



$(document).ready(function()

{

    $("#select-all-teammembers").click(function() {

        $("input[name=recipients[]]").attr('checked', true);

    });                 

});


Я бы хотел id="select-all-teammembers" при нажатии для переключения между проверяемые и непроверяемые. Идеи? это не десятки строк кода?

795   23  

23 ответов:

вы можете написать:

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

до jQuery 1.6, когда у нас было только attr (), а не prop (), мы пишем:

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

но prop() лучше, чем семантика attr() при применении к" логическим " атрибутам HTML, поэтому в этой ситуации обычно предпочтительнее.

635  
2014-03-12 23:48:58 
//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click();
189  
2015-01-07 23:54:34

Я знаю, что это старый, но вопрос был немного двусмысленным, поскольку toggle может означать, что каждый флажок должен изменять состояние, что бы это ни было. Если у вас есть 3 проверенных и 2 отключен, то переключение будет сделать первые 3 бесконтрольно и последние 2 проверено.

для этого ни одно из решений здесь не работает, поскольку они делают все флажки одинаковыми, а не переключают состояние каждого флажка. Делать $(':checkbox').prop('checked') на многих флажках возвращает логическое и между всеми .checked бинарные свойства, т. е. если один из них не установлен, то возвращается значение false.

вы должны использовать .each() если вы хотите фактически переключать каждое состояние флажка, а не делать их все равными, например

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

обратите внимание, что вам не нужно $(this) внутри обработчика как .checked собственность существует во всех браузерах.

55  
2013-04-17 19:41:15

вот еще один способ, что вы хотите.

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});
15  
2010-11-14 13:36:49

Я думаю, что проще просто вызвать щелчок:

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\[\]]").trigger('click');
});
8  
2013-06-04 17:52:00

начиная с jQuery 1.6, вы можете использовать .prop(function) для переключения проверенного состояния каждого найденного элемента:

$("input[name=recipients\[\]]").prop('checked', function(_, checked) {
    return !checked;
});
7  
2014-03-17 09:23:18

использовать этот плагин : 

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

   }

затем 

$('#myCheckBox').toggleCheck();
6  
2017-07-10 20:24:05

лучший способ, который я могу придумать.

$('#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);
}
4  
2018-01-22 17:47:21

предполагая, что это изображение, которое должно переключать флажок, это работает для меня

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">
2  
2012-05-31 17:32:37

Check-all флажок должен быть обновлен при определенных условиях. Попробуйте нажать на '#select-all-teammembers' затем убери галочку и нажмите кнопку Выбрать-все снова. Вы можете видеть несогласованность. Чтобы предотвратить это используйте следующий трюк:

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

кстати все флажки DOM-объекта должны быть кэшированы, как описано выше.

2  
2013-09-26 16:51:43 
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;
    });
});

;)

1  
2013-09-06 00:23:05

вы можете написать так же

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

просто нужно вызвать событие щелчка флажка, когда пользователь нажимает на кнопку с идентификатором "#checkbox-toggle".

1  
2014-05-19 07:07:40

лучший подход и 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);
});
1  
2014-05-20 21:02:47 
<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;
    });
});
1  
2015-06-09 14:48:27

самый простой пример будет: 

// 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>
1  
2016-07-18 00:39:40

просто вы можете использовать этот

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});
1  
2017-09-28 12:02:37

Если вы хотите переключать каждую коробку по отдельности (или только одна коробка работает так же хорошо):

Я рекомендую использовать .каждый (), так как его легко изменить, если вы хотите, чтобы разные вещи происходили, и все же относительно короткие и легко читаемые.

например :

// 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();}  
});

на стороне записки... не знаю, почему все используют .м() или .prop () to (un) проверьте вещи.

насколько я знаю, элемент.проверено всегда работало одинаково во всех браузерах?

0  
2013-06-18 15:42:28

на мой взгляд, самый правильный человек, который предложил нормальный вариант-это 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
    })
})
0  
2014-01-01 07:29:56

установка 'checked' или null вместо true или false соответственно сделает работу.

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');
0  
2014-01-28 07:24:17

это работает очень хорошо для меня.

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\[\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });
0  
2016-01-05 17:57:01

этот код будет переключать флажок при нажатии любого переключателя аниматора, используемого в веб-шаблонах. Заменять." onoffswitch-метка " как доступно в вашем коде. "checkboxID" - это флажок, установленный здесь.

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});
0  
2016-08-12 16:03:00

вот jQuery способ переключения флажков без необходимости выбора флажка с html5 & labels:

 <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

0  
2016-08-29 22:33:35

Ну есть более простой способ

сначала дайте вашим флажкам пример класса 'id_chk'

затем внутри флажка, который будет контролировать состояние флажков "id_chk":

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

вот и все, надеюсь это поможет

-3  
2013-07-10 19:07:25

Comments

    Ничего не найдено.
Click here to cancel reply.