Увімкнення / вимкнення прапорців


397

У мене є таке:

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

Мені б хотілося, щоб id="select-all-teammembers"при натисканні кнопки було переключено між зареєстрованим та невімкненим. Ідеї? це не десятки рядків коду?

Відповіді:


723

Ви можете написати:

$(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, тому, як правило, в цій ситуації переважніше.


4
Це може вийти непросто, оскільки він базує статус першого (тому якщо користувач перевіряє перший, а потім використовує перемикач, вони вийдуть із синхронізації). Трохи налаштовано, щоб він базував статус перемикача, а не перший прапорець у списку: $ ("input [ім'я = одержувачі \ [\]]"). Prop ("перевірено", $ (це) .prop (" перевірено "));
CookiesForDevo

6
Використання "опори" також робить це для Zepto. Інакше він встановить прапорець, але не зніме його.
SimplGy

1
"prop" замість "attr" зробив трюк: з "attr" він перемикається на деякий час, а потім зупиняється, а "prop" замість цього перемикається, як очікувалося. +1 для оновлення.
TechNyquist

11
$('input[type=checkbox]').trigger('click');згаданий нижче @ 2astalavista є більш лаконічним, а також викликає подію "зміни".
тут

1
чи можете ви відредагувати свою відповідь на підтримку відповіді @ CookiesForDevo
набувайте

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

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

Працює в chrome 29, але не у FF 17.0.7, хтось може це підтвердити?
Гріддо

Я так довго йшов маршрутом зміни власності. Для мене це чудовий і гнучкіший підхід для перевірки та зняття галочок з елементів прапорця.
Isioma Nnodum

Небажана подія запускається.
Jehong Ahn

Для прапорців зазвичай доцільніше запускати подію "зміни", оскільки їх можна змінити, натиснувши на мітку.
Петро Леньо

61

Я знаю, що це старе, але питання було трохи неоднозначним, оскільки перемикання може означати, що кожен прапорець повинен перемикати свій стан, незалежно від того, що це є. Якщо у вас є 3 перевірені та 2 неперевірені, тоді перемикання зробить перші 3 неперевіреними та останні 2 перевіреними.

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

Вам потрібно скористатися, .each()якщо ви хочете фактично переключити кожен стан прапорця, а не зробити їх рівними, наприклад

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

Зауважте, що вам не потрібно $(this)всередині обробника, оскільки .checkedвластивість існує у всіх браузерах.


5
Так, це правильна відповідь на зміну стану всіх прапорців!
Сідвелл

1
Замовлення на швидкість швидше, ніж натискання клавіші jQuery, коли у вас є багато прапорців.
Джеремі Кук

16

Ось ще один спосіб, який ви хочете.

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

9
Це не тужливе.
AgentFire

2
@kst - це кращий метод $ ('input [ім'я = одержувачів \ [\]]'). Забудьте про заняття.
Девіс

11

Я думаю, що простіше просто натиснути клацання:

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

9

Найкращий спосіб, про який я можу придумати.

$('#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);
}

8

Оскільки jQuery 1.6 ви можете використовувати .prop(function)для перемикання перевіреного стану кожного знайденого елемента:

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

Відмінна відповідь. Чи трапляється вам знати більше про те, як підкреслити як перший парам? Де я міг дізнатися більше про це?
користувач1477388

1
Змінити: Мабуть, це, по суті засіб проходить нульовий stackoverflow.com/questions/11406823 / ...
user1477388

8

Використовуйте цей плагін:

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

   }

Тоді

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

2

Якщо припустити, що це зображення, яке має перемикати прапорець, це працює для мене

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

4
Оскільки це ваша перша відповідь, зрозумійте, що найчастіше найкраще дотримуватися шаблону, який використовував плакат у запитанні - як, наприклад, введення коду jQuery в обробник документа, а не в рядку в розмітці. Якщо у вас є підстави цього НЕ робити, додайте пояснення, чому.
Марк Шультейс

2

Поставити прапорець потрібно оновлювати сам за певних умов. Спробуйте натиснути на "# 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-об'єкта повинні бути кешовані як описано вище.


2

Ось спосіб jQuery для перемикання прапорців без необхідності встановлення прапорця з html5 та мітками:

 <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


1

якщо ви хочете перемикати кожне поле окремо (або просто одна скринька працює так само):

Я рекомендую використовувати .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 () для (не) перевірки речей.

Наскільки я знаю, елемент Elements завжди працював однаково у всіх браузерах?


1
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

Ви також можете писати так

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

Просто потрібно зателефонувати події клацання кліку, коли користувач натисне на кнопку з id '# checkbox-toggle'.


1

Кращий підхід і 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
<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

Цей дуже добре працює для мене.

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

1
ти розумієш, що ти надаєш "перевіреному" властивості таке саме значення, яке воно вже має, правда? це не трохи бентежить? ви, очевидно, мали намір поставити !знак перед цим ..
vsync

1

Найбільш основний приклад:

// 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

просто ви можете використовувати це

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

0

на мою думку, найправеднішою людиною, яка запропонувала нормальний варіант, є 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

Встановлення "перевірено" або "null" замість true або false відповідно зробить роботу.

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

0

Цей код переключить прапорець після натискання будь-якого аніматора тумблера, який використовується у веб-шаблонах. Замініть ".onoffswitch-label", як це доступно у вашому коді. "checkboxID" - це прапорець, включений тут.

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

-3

Ну є простіший спосіб

Спочатку наведіть у своїх прапорцях приклад класу "id_chk"

Тоді всередині прапорця, який буде контролювати стан прапорців "id_chk":

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

Це все, сподіваюся, що це допомагає

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.