Подтвердить что ты не робот

Jquery выберите все флажки

У меня есть ряд флажков, которые загружаются по 100 за один раз через ajax.

Мне нужен этот jquery, чтобы у меня была кнопка при нажатии, чтобы проверить все на экране. Если больше загружено и нажата кнопка, чтобы, возможно, отключить все, а затем снова нажать, чтобы снова включить все.

Это то, что у меня есть, очевидно, это не работает для меня.

$(function () {
 $('#selectall').click(function () {
  $('#friendslist').find(':checkbox').attr('checked', this.checked);
 });
});

Кнопка #selectall, флажки - это класс .tf, и все они находятся в родительском div, называемом #check, внутри div, называемого #friend, внутри div, называемого #friendslist

Пример:

<div id='friendslist'>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr1'>
        </div>
    </div>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr2'>
        </div>
    </div>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr3'>
        </div>
    </div>
</div>

<input type='button' id='selectall' value="Select All">
4b9b3361

ОТВЕТЫ

Ответ 1

Я знаю, что пересматриваю старый поток, но эта страница отображается как один из лучших результатов в Google, когда этот вопрос задан. Я пересматриваю это, потому что в jQuery 1.6 и выше, prop() следует использовать для статуса "checked" вместо attr() с переданным true или false. Подробнее здесь.

Например, код Henrick теперь должен быть:

$(function () {
    $('#selectall').toggle(
        function() {
            $('#friendslist .tf').prop('checked', true);
        },
        function() {
            $('#friendslist .tf').prop('checked', false);
        }
    );
});

Ответ 2

$('#friendslist .tf')

этот селектор будет соответствовать вашим потребностям

Ответ 3

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

$(function () {
    $('#selectall').toggle(
        function() {
            $('#friendslist .tf').attr('checked', 'checked');
        },
        function() {
            $('#friendslist .tf').attr('checked', '');
        }
    );
});

Ответ 4

Очень простая проверка/снятие флажка без необходимости цикла

<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3

И javascript (jQuery), учитывающий значение "undefined" при значении флажка

** ОБНОВЛЕНИЕ - используя .prop() **

$("#checkAll").change(function(){
    var status = $(this).is(":checked") ? true : false;
    $(".chk").prop("checked",status);
});

** Предыдущее предложение - может не работать **

$("#checkAll").change(function(){
    var status = $(this).attr("checked") ? "checked" : false;
    $(".chk").attr("checked",status);
});

ИЛИ с предложением из следующего сообщения с использованием .prop(), объединенного в одну строку

$("#checkAll").change(function(){
    $(".chk").attr("checked",$(this).prop("checked"));
});

Ответ 5

возможно, попробуйте следующее:

$(function () {
    $('#selectall').click(function () {
        $('#friendslist .tf').attr('checked', this.checked);
    });
});

Ответ 6

Вот как я переключаю флажки

$(document).ready(function() {
    $('#Togglebutton').click(function() {
        $('.checkBoxes').each(function() {
            $(this).attr('checked',!$(this).attr('checked'));
        });
    });
});

Ответ 7

<div class="control-group">
<input type="checkbox" class="selAllChksInGroup"> All
<input type="checkbox" value="NE"> Nebraska
<input type="checkbox" value="FL"> Florida
</div>


$(document).ready(function(){

$("input[type=checkbox].selAllChksInGroup").on("click.chkAll", function( event ){
    $(this).parents('.control-group:eq(0)').find(':checkbox').prop('checked', this.checked);
});

});

Ответ 8

Я не мог заставить этот последний пример работать для меня. Правильный способ запроса состояния флажка, по-видимому:

var status = $(this).prop("checked");

а не

var status = $(this).attr("checked") ? "checked" : false;

как указано выше.

См. статус флажка получения jQuery

Ответ 9

Итак, "checked" - это crappy-атрибут; во многих браузерах он работает не так, как ожидалось:-( Попробуйте сделать:

$('#friendslist').find(':checkbox')
    .attr('checked', this.checked)
    .attr('defaultChecked', this.checked);

Я знаю, что настройка "defaultChecked" не имеет никакого смысла, но попробуйте и посмотрите, поможет ли она.

Ответ 10

Он работает для меня (IE, Safari, Firefox), просто изменив значение this.checked на 'checked'.

$(function() {
  $('#selectall').click(function() {
    $('#friendslist').find(':checkbox').attr('checked', 'checked');
  });
 });

Ответ 11

Вы можете попробовать следующее:

$(function () {
 $('#selectall').click(function () {
  $('#friendslist input:checkbox').attr('checked', checked_status);
 });
});

//checked_status = true/false - если дело может быть, или установить его с помощью переменной

Ответ 12

Предполагая, что #selectall - это флажок, состояние которого вы хотите скопировать во все остальные флажки?

$(function () {
 $('#selectall').click(function () {
  $('#friendslist input:checkbox').attr('checked', $(this).attr('checked'));
 });
});

Ответ 13

попробуйте это

var checkAll = function(){  
var check_all = arguments[0];
var child_class = arguments[1];
if(arguments.length>2){
    var uncheck_all = arguments[2];

    $('#'+check_all).click(function (){
        $('.'+child_class).attr('checked', true);
    });

    $('#'+uncheck_all).click(function (){
        $('.'+child_class).attr('checked', false);
    });

    $('.'+child_class).click(function (){
        var checkall_checked = true;
        $('.'+child_class).each(function(){
            if($(this).attr('checked')!=true){
                checkall_checked = false;
            }
        });
        if(checkall_checked == true){
            $('#'+check_all).attr('checked', true);
            $('#'+uncheck_all).attr('checked', false);
        }else{
            $('#'+check_all).attr('checked', false);
            $('#'+uncheck_all).attr('checked', true);
        }
    });
}else{
    $('#'+check_all).click(function (){
        $('.'+child_class).attr('checked', $(this).attr('checked'));
    });

    $('.'+child_class).click(function (){
        var checkall_checked = true;
        $('.'+child_class).each(function(){
            if($(this).attr('checked')!=true){
                checkall_checked = false;                   
            }
        });
        $('#'+check_all).attr('checked', checkall_checked);
    });
}
};

"Проверить все" и "снять отметку со всех" - это тот же флажок

checkAll ( "checkall_id", "child_checkboxes_class_name" );

Чтобы "проверить все" и "снять галочку" отдельно, установите флажок

checkAll ( "checkall_id", "child_checkboxes_class_name", "uncheckall_id" );

Ответ 14

Вот как я это достиг.

function SelectAllCheckBoxes();
{
$('#divSrchResults').find(':checkbox').attr('checked', $('#chkPrint').is(":checked"));
}

Ниже приведена следующая строка.

<input type=checkbox id=chkPrint onclick='SelectAllCheckBoxes();' />

При щелчке chkPrint каждый флажок в сетке divSrchResults 'либо проверяется, либо не проверяется в зависимости от состояния chkPrint.

Конечно, если вам нужны расширенные функции, такие как снятие флажка с надписью, когда все остальные флажки сняты, вам нужно написать еще одну функцию для этого.

Ответ 15

Я создал функцию, которую я использую для всех проектов. Это только первоначальный проект, но, возможно, это поможет:

Функции:

function selectAll(wrapperAll, wrapperInputs) {

    var selectAll = wrapperAll.find('input');
    var allInputs = wrapperInputs.find('input');

    console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length);

    function checkitems(allInputs) {
        //If all items checked
        if (allInputs.filter(':not(:checked)').length === 0) {
            console.log('Function: checkItems: All items checked');
            selectAll.attr('checked', true);

        } else {
            console.log('Function: checkItems: Else all items checked');
            selectAll.attr('checked', false);
        }
    }

    checkitems(allInputs);
    allInputs.on('change', function () {
        checkitems(allInputs)
    });

    selectAll.on('change', function () {
        if (this.checked) {
            console.log('This checkbox is checked');
            wrapperInputs.find(':checkbox').attr('checked', true);

        } else {
            console.log('This checkbox is NOT checked');
            wrapperInputs.find(':checkbox').attr('checked', false);

        }
    });

}

Он принимает 2 параметра, в которые вставляются входы, и вы используете их: это / 

$(function () {

    var wrapperAll = $('.selectallinput');
    var wrapperInputs = $('.inputs');

    selectAll(wrapperAll, wrapperInputs);
});

См. демонстрацию: http://jsfiddle.net/cHD9z/

Ответ 16

<input type="checkbox" onclick="toggleChecked(this.checked)"> Select / Deselect All

Now here are  two versions of the toggleChecked function dependent on the semantics of your document. The only real difference is the jQuery selector for your list checkboxes:

1: All checkboxes have a class of  "checkbox" (<input type="checkbox" class="checkbox" />)
function toggleChecked(status) {
$(".checkbox").each( function() {
$(this).attr("checked",status);
})
}

2: All the checkboxes are contained within a div with an arbitary id:

<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>

In this case the function would look like this:

function toggleChecked(status) {
$("#checkboxes input").each( function() {
$(this).attr("checked",status);
})

Have fun!

Ответ 17

Это может работать как для (check/unchecked) ситуаций selectall:

$(document).ready(function(){
 $('#selectall').click(function () {
   $("#friendslist .tf").attr("checked",function(){return $(this).attr("checked") ? false : true;});
 });
});

Ответ 18

принятый в настоящее время ответ не будет работать для jQuery 1.9+. В этой версии был удален аспект обработки событий (довольно сильно перегружен) .toggle(), что означает, что попытка вызова .toggle(function, function) вместо этого просто переключит состояние отображения вашего элемента.

Я бы предложил сделать что-то вроде этого:

$(function() {
    var selectAll = $('#selectall');
    selectAll.on('click', function(e) {
        var checked = !(selectAll.data('checked') || false);
        $('#friendslist .tf').prop('checked', checked);
        selectAll.data('checked', checked);
    });
});

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

Ответ 19

Вот базовый плагин jQuery, который я написал, который выбирает все флажки на странице, кроме флажка/элемента, который должен использоваться в качестве переключателя. Разумеется, это может быть изменено в соответствии с вашими потребностями:

(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));

Затем просто вызовите функцию в вашем флажке или элементе кнопки:

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});

Когда вы добавляете и удаляете больше флажков через AJAX, вы можете использовать это вместо .change():

// Check all checkboxes
$(document).on('change', '.check-all', function() {
    $(this).toggleCheckboxes();
});