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


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.