Кнопка jQuery check/uncheck onclick

Ответ 1

Если все, что вы хотите сделать, это проверить флажок, не беспокойтесь об этом с помощью JQuery. Это функция по умолчанию для флажка при щелчке. Однако, если вы хотите делать дополнительные вещи, вы можете добавить их с помощью JQuery. До jQuery 1.9 вы можете использовать $(this).attr('checked');, чтобы получить значение вместо $(this).attr('checked', true);, так как второе установит значение.

Здесь - демонстрация скрипта, показывающая функциональность по умолчанию по умолчанию и то, что вы делаете с JQuery.

Примечание: После JQuery 1.6 вы должны использовать $(this).prop; вместо $(this).attr во всех трех местах (спасибо @Whatevo за указание этого и см. здесь для более подробной информации).

UPDATE:

Извините, пропустил требование, чтобы он был радиокнопкой. Вы по-прежнему можете рассмотреть этот флажок, но здесь - это обновленный код для версии радиоввода. Он работает, установив previousValue в качестве атрибута флажка, так как я не думаю, что prop поддерживается в 1.3.2. Вы также можете сделать это в переменной с областью, так как некоторым людям не нравится устанавливать случайные атрибуты в полях. Здесь - новый пример.

ОБНОВЛЕНИЕ 2:

Как заметил Джош, предыдущее решение работало только с одним переключателем. Здесь функция, которая делает группу радиостанций недоступными по их имени, и fiddle:

var makeRadiosDeselectableByName = function(name){
    $('input[name=' + name + ']').click(function() {
        if($(this).attr('previousValue') == 'true'){
            $(this).attr('checked', false)
        } else {
            $('input[name=' + name + ']').attr('previousValue', false);
        }

        $(this).attr('previousValue', $(this).attr('checked'));
    });
};

Ответ 2

Я расширил предыдущие предложения. Это работает для меня, с несколькими радиостанциями, связанными с тем же именем.

$("input[type='radio']").click(function()
{
  var previousValue = $(this).attr('previousValue');
  var name = $(this).attr('name');

  if (previousValue == 'checked')
  {
    $(this).removeAttr('checked');
    $(this).attr('previousValue', false);
  }
  else
  {
    $("input[name="+name+"]:radio").attr('previousValue', false);
    $(this).attr('previousValue', 'checked');
  }
});

Ответ 3

Вместо того, чтобы получать проверенное значение, вы устанавливаете его с помощью:

var checked = $(this).attr('checked', true);

Чтобы правильно его получить:

var checked = $(this).attr('checked');

Рабочее решение (с несколькими переключателями, имеющими разные значения):

// select radio buttons group (same name)
var radioButtons = $("input[type='radio'][name='rr']");
// save initial ckecked states
var radioStates = {};
$.each(radioButtons, function(index, rd) {
    radioStates[rd.value] = $(rd).is(':checked');
});

// handle click event
radioButtons.click(function() {

    // check/unchek radio button
    var val = $(this).val();  
    $(this).prop('checked', (radioStates[val] = !radioStates[val]));    

    // update other buttons checked state
    $.each(radioButtons, function(index, rd) {
        if(rd.value !== val) {
            radioStates[rd.value] = false; 
        }
    });
});

P.S.: $().attr следует использовать вместо $().prop для jquery < 1.6

Демо: jsFiddle

Ответ 4

Лучшее и кратчайшее решение. Он будет работать для любой группы радиостанций (с тем же именем).

$(document).ready(function(){
    $("input:radio:checked").data("chk",true);
    $("input:radio").click(function(){
        $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
        $(this).data("chk",!$(this).data("chk"));
        $(this).prop("checked",$(this).data("chk"));
        $(this).button('refresh'); // in case you change the radio elements dynamically
    });
});

Дополнительная информация здесь.

Enjoy.

Ответ 5

Я считаю, что это проблема: если у вас есть несколько переключателей, и один из них щелкнут, нет никакого способа отменить выбор всех из них. Для этого необходим "ни один или только один" селектор, поэтому флажки не подходят. У вас может быть кнопка "clear" или что-то в этом духе, чтобы отменить выбор всех, но было бы неплохо просто щелкнуть выбранный переключатель, чтобы отменить его, и вернуться в состояние "none", чтобы вы не загромождали свой пользовательский интерфейс. дополнительный контроль.

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

$("input[name=myRadioGroup]").mousedown(function () 
{
    $(this).attr('previous-value', $(this).prop('checked'));
});

$("input[name=myRadioGroup]").click(function () 
{
    var previousValue = $(this).attr('previous-value');

    if (previousValue == 'true')
        $(this).prop('checked', false);
});

Ответ 6

toggleAttr() предоставляется этот очень красивый и крошечный плагин.

Пример кода

$('#my_radio').click(function() {
    $(this).toggleAttr('checked');
});

/**
 * toggleAttr Plugin
 */
jQuery.fn.toggleAttr = function(attr) {
    return this.each(function() {
        var $this = $(this);
        $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
    });
};

Еще веселее, demo

Вы можете использовать свой радиокнопку внутри ярлыков или тегов кнопок и делать приятные вещи.

Ответ 7

Улучшенная версия ответа от Jurrie

$('#myRadio').off('click').on('click', function() {
  if ($(this).data('checked')) {
    $(this).removeAttr('checked');
    $(this).data('checked', false);
  } else {
    $(this).data('checked', true);
  }
});

Live Demo

Ответ 8

Протестировав некоторые из вышеперечисленных решений, которые не работали для меня на 100%, я решил создать свой собственный. Он создает новые клики для кликов после нажатия кнопки радиосвязи:

/**
 * Radio select toggler
 * enables radio buttons to be toggled when clicked
 * Created by Michal on 09/05/2016.
 */

var radios = $('input[type=radio]');

/**
 * Adds click listeners to all checkboxes to unselect checkbox if it was checked already
 */
function updateCheckboxes() {
    radios.unbind('click');
    radios.filter(':checked').click(function () {
        $(this).prop('checked', false);
    });
    radios.click(function () {
        updateCheckboxes();
    });
}

updateCheckboxes();

Ответ 9

$ (Документ).ready (функция() {   $ ( "Вход: радио: проверено") данные ( "ЧК", правда);.

$("input:radio").click(function(){
    $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");

    $(this).data("chk",!$(this).data("chk"));

    $(this).prop("checked",$(this).data("chk"));
});

});

Ответ 10

- EDIT -

Похоже, ваш код заставляет радиоввод вести себя как входной флажок. Вы могли бы подумать только об использовании ввода флажка без необходимости jQuery. Однако, если вы хотите заставить, как сказал @manji, вам нужно сохранить значение за пределами обработчика кликов, а затем установить его при каждом нажатии на противоположное тому, что было в тот момент. Ответ @manji правильный, я бы просто добавил, что вы должны кэшировать объекты jQuery вместо повторного запроса DOM:

var $radio = $("#radioinstant"),
    isChecked = $radio.attr("checked");

$radio.click(function() {

    isChecked = !isChecked;
    $(this).attr("checked", isChecked);

});

Ответ 11

DiegoP,

У меня была такая же проблема, пока я не понял, что проверка на флажке не исчезает, пока атрибут не будет удален. Это означает, что даже если проверенное значение сделано ложным, оно останется там.

Следовательно, используйте функцию removeAttr() и удалите проверенный атрибут, и он ОПРЕДЕЛЕННО РАБОТАЕТ.

Ответ 12

Если у вас все еще есть ответы, я обнаружил, что это работает со всеми переключателями:

<script type="text/javascript">
        jQuery(document).ready(function ($){
                    var allRadios = $('input[type=radio]')
                    var radioChecked;

                    var setCurrent = 
                                    function(e) {
                                        var obj = e.target;

                                        radioChecked = $(obj).attr('checked');
                                 }

                    var setCheck = 
                                function(e) {

                                    if (e.type == 'keypress' && e.charCode != 32) {
                                        return false;
                                    }

                                    var obj = e.target;

                         if (radioChecked) {
                         $(obj).attr('checked', false);
                         } else {
                         $(obj).attr('checked', true);
                         }
                             }    

                    $.each(allRadios, function(i, val){        
                         var label = $('label[for=' + $(this).attr("id") + ']');

                     $(this).bind('mousedown keydown', function(e){
                            setCurrent(e);
                        });

                        label.bind('mousedown keydown', function(e){
                            e.target = $('#' + $(this).attr("for"));
                            setCurrent(e);
                        });

                     $(this).bind('click', function(e){
                            setCheck(e);    
                        });

                    });
        });
</script>

Ответ 13

Эта функция добавит чек/непроверенную ко всем радиокнопкам

jQuery(document).ready(function(){
jQuery(':radio').click(function()
{
if ((jQuery(this).attr('checked') == 'checked') && (jQuery(this).attr('class') == 'checked'))
{   
    jQuery(this).attr('class','unchecked');
    jQuery(this).removeAttr('checked');
} else {
jQuery(this).attr('class','checked');
}//or any element you want

});
});

Ответ 14

Я взял fooobar.com/questions/135498/... и адаптировал его следующим образом

$(document).ready(function() {

        $('body').on('click', 'input[type="radio"]', function() {
            changeCheckedAttributes($(this));
        });
        function changeCheckedAttributes(elt) {
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeData("chk");
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeAttr("checked");
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).prop("checked", false);
            $(elt).data("chk",!$(elt).data("chk"));
            $(elt).prop("checked", true);
            $(elt).attr("checked", $(elt).data("chk"));
        }

    });

Ответ 15

Я бы предложил следующее:

$('input[type="radio"].toggle').click(function () {
    var $rb = $(this);

    if ($rb.val() === 'on') {
        $rb.val('off');
        this.checked = false;
    }
    else {
        $rb.val('on');
        this.checked = true;
    }
});

Ваш HTML будет выглядеть так:

<input type="radio" class="toggle" value="off" />

Ответ 16

У меня есть связанный, но другой сценарий. Вот что я делаю:

Примечание. Код для выбора/отмены выбора всех переключателей класса "containerRadio", когда выбран основной переключатель.

CODE

        $('#selectAllWorkLot').click (function ()
        {

              var previousValue = $(this).attr('previousValue');

              if (previousValue == 'checked')
              {
                resetRadioButtonForSelectAll();

                //Unselect All
                unSelectAllContainerRadioButtons();
              }
              else
              {
                $(this).attr('previousValue', 'checked');

                //Select All
                selectAllContainerRadioButtons();
              }
        });


        function resetRadioButtonForSelectAll()
        {
            $('#selectAllWorkLot').removeAttr('checked');
            $('#selectAllWorkLot').attr('previousValue', false);
            //$('#selectAllWorkLot').prop('checked', false);
        }


        function selectAllContainerRadioButtons()
        {
            $('.containerRadio').prop('checked', true);
        }

        function unSelectAllContainerRadioButtons()
        {
            $('.containerRadio').prop('checked', false);
        }

Ответ 17

У меня была связанная с этим проблема - мне пришлось открыть диалоговое окно из раскрывающегося списка на основе выбора из раскрывающегося списка. Я покажу один или два переключателя. Только один переключатель может быть активирован одновременно.

• В опции 1 будет отображаться два переключателя с 1-м радиоприемником
• В опции 2 появится второй переключатель и выбран.

script работает некоторое время, когда он вводит отмеченный флажок, но флажок по-прежнему не установлен

Я пошел в jQuery .prop(), похоже, что jquery .prop() .attr() имеет некоторые сложности с переключателями при использовании attr или prop. Итак, что я сделал, это вызвать щелчок на переключателе на основе значения Select.

Это устраняет необходимость использования attr или prop или использования при выключенном длинном коде.

myForm = $("#myForm");

if (argument === 'multiple') {
            myForm.find('#radio1').parent('li').hide();
            myForm.find('#radio2').trigger('click');
    }
    else{
        myForm.find('#radio1').trigger('click');
         myForm.find('#radio1').parent('li').show();
    }

Не уверен, что это лучшая практика, но это - работает как шарм

Ответ 18

вот простое решение, я надеюсь, что это поможет вам. вот простой пример для улучшения ответа.

$('[type="radio"]').click(function () {

            if ($(this).attr('checked')) {

                $(this).removeAttr('checked');
                $(this).prop('checked',false);

            } else {

                $(this).attr('checked', 'checked');

            }
        });

Демо извините слишком поздно..:)

Ответ 19

Последнее решение - это то, что сработало для меня. У меня была проблема с Undefined и объектом объекта или всегда возвращалась false, а затем возвращалась true, но это решение работает при проверке и отмене проверки.

Этот код показывает поля при нажатии и скрытии полей при не проверке:

$("#new_blah").click(function(){
   if ($(this).attr('checked')) {

            $(this).removeAttr('checked');
    var radioValue = $(this).prop('checked',false);
    // alert("Your are a rb inside 1- " + radioValue);
    // hide the fields is the  radio button is no     
    $("#new_blah1").closest("tr").hide();
    $("#new_blah2").closest("tr").hide();

    } 
    else {

    var radioValue =  $(this).attr('checked', 'checked');
    // alert("Your are a rb inside 2 - " + radioValue);
    // show the fields   when radio button is set to  yes
    $("#new_blah1").closest("tr").show();
    $("#new_blah2").closest("tr").show();

}

Ответ 20

Решения, которые я пробовал из этого вопроса, не помогли мне. Из ответов, которые отчасти работали, я все же обнаружил, что мне нужно дважды щелкнуть ранее не отмеченную радиокнопку, чтобы снова проверить ее. В настоящее время я использую jQuery 3 +.

После беспорядка с попыткой заставить это работать с использованием атрибутов данных или других атрибутов, я, наконец, понял решение, используя вместо этого класс.

Для выбранного вами радиоввода введите класс checked например:

<input type="radio" name="likes_cats" value="Meow" class="checked" checked>

Вот jQuery:

$('input[type="radio"]').click(function() {
    var name = $(this).attr('name');

    if ($(this).hasClass('checked')) {
        $(this).prop('checked', false);
        $(this).removeClass('checked');
    }
    else {
        $('input[name="'+name+'"]').removeClass('checked');
        $(this).addClass('checked');
    }
});

Ответ 21

Если вы используете клик и проверяете только, проверено ли радио, и затем отмените выбор, вы никогда не получите радиоприемник. Поэтому, возможно, проще всего использовать такие имена классов:

if($(this).hasClass('alreadyChecked')) {//it is already checked
        $('.myRadios').removeClass('alreadyChecked');//remove from all radios
        $(this).prop('checked', false);//deselect this
    }
    else {
        $('.myRadios').removeClass('alreadyChecked');//remove from all
        $(this).addClass('alreadyChecked');//add to only this
    }

Ответ 22

Самое простое решение. Для радио и чекбоксов.

$('body').on('click', 'input[type="checkbox"]', function(){
    if ($(this).attr('checked')){
        $( this ).attr( 'checked', false);
    } else {
        $( this ).attr( 'checked', true);
    }
});
$('body').on('click', 'input[type="radio"]', function(){
    var name = $(this).attr('name');
    $("input[name="+name+"]:radio").attr('checked', false);
    $( this ).attr( 'checked', true);
});