Как снять флажок с переключателя

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

[form name="A"]
<li>[input type="radio" name="BookItem" value="1" /]</li>
<li>[input type="radio" name="BookItem" value="2" /]</li>
<li>[input type="radio" name="BookItem" value="3" /]</li>
[form]<p>

После того, как "BookItem" выбран из формы (A), я вызываю функцию $("#EditFormWrapper").load("callEditData.cfm? ID="+ID);, чтобы загрузить вторую форму (B).

<div id="EditFormWrapper"><div></p>
<!---//  begin dynamic form generated by external file callEditData.cfm  //--->
[form id="editForm" name="B"]
<ul class="hourswrapper">
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs1" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs1" /> 2 Hours PM</li>
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs2" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs2" /> 2 Hours PM</li>
</ul>
[input type="image" src="images/submit-btn.gif" id="addBTN" name="addBTN" class="buttons" alt="SubmitRrequest" /]
[input type="image" src="images/cancel-btn.gif" id="editBTNcancel" name="editBTNcancel" class="buttons" alt="Cancel Request" /]
[/form]
<!---//  end dynamic form from external file //--->

Я хочу снять флажок с переключателя в форме (A), когда пользователь нажимает кнопку отмены (editBTNcancel) в форме (B).

Вот мой сценарий:

$("#editBTNcancel").live("click", function(event){
    event.preventDefault();
    $("#EditFormWrapper").slideUp("fast").empty();
    //$('.TOR2Hours').removeAttr('checked');
    $('.TOR2Hours').attr('checked', false);
});

Надеюсь, я четко изложу свою проблему, любые предложения будут приняты с благодарностью!


javascript jquery radio-button dynamic-forms
person user281867    schedule 06.04.2010    source источник
comment
Можете ли вы опубликовать HTML-код, содержащий переключатели. .removeAttr('checked') и .attr('checked', false) оба работают на меня. Также jsfiddle.net/JAEsd, в каком браузере вы их тестируете?   -  person Anurag    schedule 07.04.2010
comment
Пожалуйста, повторно разместите свой код как HTML, а не как BB-код.   -  person Justin Johnson    schedule 07.04.2010
comment
$(radio).attr('checked', false) верен и у меня работает. Вы уверены, что выбираете правильные элементы? Я не вижу class="TOR2Hours" в ваших радиоприемниках.   -  person bobince    schedule 07.04.2010
comment
У меня работает только .removeAttribute('checked')   -  person Qohelet    schedule 10.03.2015

Ответы (6)


arrow_upward
8
arrow_downward

Я не совсем уверен, что вы хотите, но вы можете попробовать использовать вход для сброса.

<input type='reset' />
person jeremysawesome    schedule 06.04.2010
comment
полностью согласен, или, как я ответил, не контрольное, а reset событие - person vittore; 07.04.2010
comment
спасибо за ваш ответ, но переключатель находится в другой форме, поэтому это не сработает. - person user281867; 07.04.2010
comment
@ user281867: вызов reset для переключателей формы. document.getElementById("radiobuttonsform").reset(); - person vittore; 07.04.2010
comment
СПАСИБО, Vittore, этот документ. GetElementById (radiobuttonsform) .reset (); работает!!! - person user281867; 07.04.2010
comment
Извините, это опоздание на 8 лет. Если вы обращаете внимание на четкую семантику HTML, вам следует поместить свой сброс в ту же форму, что и элементы управления, которые он сбрасывает. Сказать, что это не в той же форме, предполагает, что ваши формы сбиты с толку. Я понимаю, как вы могли использовать элементы <form> для разделения элементов управления формы на своей странице, но вам, вероятно, не нужно было, и вы могли бы использовать вместо них <fieldset>, <section>, <p> или <div>. Или, возможно, у вас есть разные формы, которые указывают на разные конечные точки, и в этом случае вы можете предоставить отдельные элементы управления сбросом для каждой. - person Simon Dell; 09.11.2018

arrow_upward
11
arrow_downward

вы можете получить доступ к форме так ...

var exampleForm = document.forms['form_name'];

затем прокрутите форму

for( var i=0; i<exampleForm.length; i++ ){
   alert( exampleForm[i].type );
}

вы можете проверить проверен вот так ...

if( exampleForm[i].checked )

чтобы отменить выбор отмеченной радиокнопки, попробуйте ...

exampleForm[i].checked=false;

окончательный код будет выглядеть так ...

var exampleForm = document.forms['form_name'];
for( var i=0; i<exampleForm.length; i++ ){
   if( exampleForm[i].type ) == 'radio' && exampleForm[i].checked == true ){
       exampleForm[i].checked = false;
   }
}
person brock    schedule 14.06.2012
comment
В вашем первом фрагменте кода должно быть указано document вместо documents. Хотя хороший ответ. - person RustyTheBoyRobot; 14.06.2012
comment
Есть ли способ узнать, было ли снято выделение с радио? Я так долго работал с фреймворками ... только что понял, что onchange на самом деле _2 _... Если бы у меня были слушатели на каждом радио в группе, чтобы получить выбранную кнопку, не должны ли все остальные слушатели в этой группе стрелять выкл с event.target.checked === false каждый раз, когда выбирается новый? Так работают флажки, да? - person Cody; 22.05.2016

arrow_upward
3
arrow_downward

Поскольку это в значительной степени самая простая задача DOM из существующих и работает во всех браузерах с поддержкой сценариев, я предлагаю не использовать для нее методы jQuery:

$(".TOR2Hours")[0].checked = false;

Другой вопрос, который возникает передо мной, - правильный ли ваш селектор. Вы хотели выбрать набор элементов по классу или это должен быть селектор идентификаторов?

person Tim Down    schedule 07.04.2010

arrow_upward
1
arrow_downward

Ваш селектор просто неправильный. Если вы хотите снять флажок с переключателя в первой форме, вы должны использовать $('input[name="BookItem"]'), а не $('.TOR2Hours'):

$("#editBTNcancel").on("click", function(event){ $("#EditFormWrapper").slideUp("fast").empty(); $('input[name="BookItem"]').attr('checked', false); });

Что касается того, какой метод использовать для снятия флажков переключателей, все следующие 3 метода должны работать:

  1. $('input[name="BookItem"]').attr('checked', false);
  2. $('input[name="BookItem"]').removeAttr('checked');
  3. $('input[name="BookItem"]').prop('checked', false);

Однако ознакомьтесь с документацией jQuery на странице jQuery prop (), чтобы узнать о различиях между attr() и prop().

person Joel Kornbluh    schedule 01.10.2014

arrow_upward
0
arrow_downward

Я только что нашел отличное решение этой проблемы.

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

var gift_click = 0;
    function HandleGiftClick() {
        if (document.getElementById('LeftPanelContent_giftDeed2').checked == true) {
            gift_click++;
            memorial_click = 0;
        }
        if (gift_click % 2 == 0) {document.getElementById('LeftPanelContent_giftDeed2').checked = false; }
    }
    var memorial_click = 0;
    function HandleMemorialClick() {          
        if (document.getElementById('LeftPanelContent_memorialDeed2').checked == true) {
            memorial_click++;
            gift_click = 0;
        }
        if (memorial_click % 2 == 0) { document.getElementById('LeftPanelContent_memorialDeed2').checked = false; }
    }

:) Добро пожаловать

person Jacob Gaiski    schedule 09.02.2012
comment
Не знаю, ПОЧЕМУ этот ответ был на -1. Это ближе к приемлемому ответу, потому что он касается самой сложной части снятия отметки с радио входа - ПОСЛЕДОВАТЕЛЬНОСТИ СОБЫТИЯ. Каждый должен знать очевидное свойство checked - ДЕЙСТВИТЕЛЬНО, вы можете даже не заботиться об этом, в зависимости от того, какой фреймворк вы используете. Проблема в том, что когда вы получаете событие - скажем, щелчок - когда вы снимаете флажок , всегда может отображаться checked === true. На сегодняшний день это может быть наиболее хорошо продуманный ответ. - person Cody; 17.07.2016

arrow_upward
0
arrow_downward

Я использую этот способ для решения вашей проблемы в ASP.net, проверьте это ..

radioButton.InputAttributes["show"] = "false"; 
string clickJs = " if(this.show =='true'){this.show ='false'; this.checked = false;}else{this.show='true'; this.checked = true;};";  

radioButton.Attributes["onClick"] = clickJs;

В asp.net вы можете использовать этот способ для добавления атрибута. И вы также можете вручную добавить атрибут к radioButton и выполнить функцию (clickJs) для изменения атрибутов ckecked !!!

person Jason SP Lin    schedule 25.12.2012