Як зняти прапорець?


482

У мене є група радіо кнопок, яку я хочу зняти, після надсилання форми AJAX за допомогою jQuery. У мене є така функція:

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

За допомогою цієї функції я можу очистити значення в текстових полях, але я не можу очистити значення перемикачів.

До речі, я теж намагався, $(this).val("");але це не вийшло.


3
Вам не знадобиться кожна функція. Ви можете просто викликати потрібну функцію об'єкта jQuery. Дивіться мою відповідь нижче
— Джеймс Вісман

1
немає потреби в кожній функції () .. jQuery ("вхід: радіо"). видалити AtA ("перевірено");
— Джітендра Дамор

Відповіді:


737

або (звичайний js)

this.checked = false;

або (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

Дивіться довідкову сторінку jQuery prop () для пояснення про різницю між attr () та prop () і чому prop () тепер є кращим.
prop () був представлений jQuery 1.6 у травні 2011 року.


29
ЗОЗ, майте на увазі, що його поведінка змінюється на 1.6 на користь prop(), тоді .attr()як обмежуватиметься фактичними атрибутами
— Фабіано Соріані

Тож найкраще тут використовувати звичайний JS?
— Дуг Моліне

14
@ Pete: Я б сказав, що якщо у вас є система, побудована на jQuery, то додатковою перевагою, яка дає вам, є те, що якщо є будь-який браузер, який обробляє це по-іншому, ви зможете делегувати підтримку браузера в бібліотеку. Однак, якщо ваше програмне забезпечення зараз не використовує jQuery, не варто було б фактично включати бібліотеку саме для цього.
— Девід Хедлунд

@David Hedlund: Я думаю, ви натякаєте на те, що всі основні браузери поводяться з цим так само, як і сьогодні, правда?
— Шон

2
@qris: Ваша проблема, мабуть, десь інша. Проста демонстрація, використовуючи jQuery 1.9 . Звичайно, працює в моєму Chrome.
— Девід Гедлунд

88

Вам би не потрібна eachфункція

$("input:radio").attr("checked", false);

Або

$("input:radio").removeAttr("checked");

Те саме має стосуватися і вашого текстового поля:

$('#frm input[type="text"]').val("");

Але ви могли б це покращити

$('#frm input:text').val("");

2
.removeAttr, ймовірно, спричинить проблеми.
— Kzqai

Хочете розширити, як? Або надати посилання?
— Джеймс Вісман

Так, Kzqai, мені також цікаво, що моя відповідь також була заголошена за це. У документації немає жодного ризику.
— cjstehno

1
Відповідна документація є фактично методом .prop (): api.jquery.com/prop Цитата "Властивості, як правило, впливають на динамічний стан елемента DOM без зміни серіалізованого атрибута HTML. Приклади включають властивість значень елементів вводу, вимкнено властивість входів і кнопок або встановлене прапорець прапорець. Метод .prop () слід використовувати для встановлення вимкнених і перевірених замість методу .attr (). Для отримання та встановлення значення слід використовувати метод .val (). . " Це означає, що ...
— Kzqai

1
... Це означає, що .attr () буде змінювати інше базове джерело, ніж .prop (), серіалізований атрибут html замість DOM, і хоча це може бути сумісним зараз (наприклад, jQuery 1.9 може змінювати і коли, коли .attr () використовується), це не гарантує, що буде змінено обидва в майбутньому, коли .prop () є канонічним. Наприклад, якщо ви використовуєте .attr ("перевірено", помилково); а бібліотека, яку ви використовуєте, включає в себе .prop ("перевірено", правда); там буде властивий конфлікт, який може спричинити набридливі помилки.
— Kzqai

29

Спробуйте

$(this).removeAttr('checked')

Оскільки багато браузерів інтерпретують "перевірено = що-небудь" як істинне. Це повністю видалить перевірений атрибут.

Сподіваюсь, це допомагає.


Крім того, як згадується одна з інших відповідей, вам не потрібно мати кожну функцію; ви можете просто зав'язати виклик removeAttr до селектора.
— cjstehno

6
ПРИМІТКА: ця відповідь є з 2010 року. На той час це був дійсний і прийнятий підхід. З тих пір вона застаріла.
— cjstehno

21

Невелика модифікація плагіна Лауріна на основі коду Ігоря. Тут розміщені можливі мітки, пов’язані з націлюванням на радіо кнопки:

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

1
Це залежить від того, як використовуються мітки, якщо вони використовують ідентифікатори, то цей код працює, якщо перемикач вкладений у мітку, яка не є. Ви можете використовувати цю ще більш вдосконалену версію: gist.github.com/eikes/9484101
— eikes

20

Дякую Патріку, ти зробив мій день! Це вам доведено використовувати. Однак я вдосконалив код, щоб ви могли обробляти групу перемикачів.

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

17

Перепишіть код Ігоря як плагін.

Використання:

$('input[type=radio]').uncheckableRadio();

Підключати:

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

Якщо я натиснув ярлик, скасування вибору не працює. Тож поки можна вибрати радіо, натиснувши на етикетку, скасування вибору працює лише натисканням на саму радіо кнопку.
— Саймон Хюрліманн

@ alkos333 має рішення, яке, здається, теж працює з мітками.
— Саймон Хюрліманн

Це залежить від того, як використовуються мітки, якщо вони використовують ідентифікатори, то працює код @ alkos333, якщо перемикач вкладено в мітку, використовуйте цю версію: gist.github.com/eikes/9484101
— eikes

16

Для радіо та радіогрупи:

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

14

Спробуйте це, це зробить фокус:

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });


9

Ви також можете імітувати поведінку радіо кнопки, використовуючи лише прапорці:

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

Потім ви можете використовувати цей простий код, щоб працювати для вас:

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

Це добре працює, і ви маєте більше контролю над поведінкою кожної кнопки.

Ви можете спробувати самостійно за адресою: http://jsfiddle.net/almircampos/n1zvrs0c/

Ця вилка також дозволить вам зняти все, як вимагається в коментарі: http://jsfiddle.net/5ry8n4f4/


Це чудово, за винятком того, що ви не можете зняти прапорці з усіх полів.
— Стефан

6

Просто поставте наступний код для jQuery:

jQuery("input:radio").removeAttr("checked");

А для javascript:

$("input:radio").removeAttr("checked");

Не потрібно ставити петлю переднього плану, .each () fubction чи будь-які речі



4
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

Це майже добре, але ви пропустили [0]

Правильно - >> $(this)[0].checked = false;


1
або просто:this.checked = false;
— eikes

4

Ви можете використовувати цей JQuery, щоб зняти прапорець

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

1
function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

: D


-2
$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

Кожен раз, коли ви двічі клацніть на зареєстрованому радіо, він перевіряє зміну на помилку

Мої радіоприймачі починаються з того, id=radxxxxxxxxщо я використовую цей перемикач ідентифікаторів.


3
Будь ласка, напишіть відповідь (зрозумілою) англійською мовою.
— ericbn

@ericbn що робити, якщо хтось не знає англійської мови?
— AlphaMale

@AlphaMale англійська мова є офіційною мовою на цьому веб-сайті.
— Крістік

@ Cristik Не всі програмісти походять із країн, що говорять "англійською". Це означає, що вони не можуть публікувати на цьому форумі? По-друге, це був товариш 2 роки. Дякую за те, що просвітиш мене.
— AlphaMale

-2
function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

Правильний селектор: #frm input[type="radio"]:checked немає#frm input[type="radio":checked]

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