Javascript включить отключить переключатель на кнопку и выберите только по одному за раз - PullRequest
Новая
       27

Javascript включить отключить переключатель на кнопку и выберите только по одному за раз

0 голосов
/ 13 декабря 2011

Я пытаюсь это сделать.

У меня 3 радиокнопки,

  1. Если нажать на радио, и оно установлено, в следующий раз, когда я нажму на него.Это должно быть не проверено / rest.

Я хочу сделать в стандартном javascript без jquery, так как в настоящее время этого не может быть.

Вот мой код. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>  
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript">

   function toggle(radioBtn)
   {
     if(radioBtn.checked)
     {
       radioBtn.checked = false;
     }
     else
     {
      radioBtn.checked = true;
     }


     // only select one at a time.

   }

  </script>
 </head>

 <body>
 <form id="myForm" name="myForm">
  <input type="radio" name="radioBtn" id="radioBtn1"    value="A" onClick="toggle(this);" />
<input type="radio" name="radioBtn" id="radioBtn1"    value="B" onClick="toggle(this);"/>
<input type="radio" name="radioBtn" id="radioBtn1"    value="C" onClick="toggle(this);"/>
</form>
 </body>
</html>

Пожалуйста, помогите.Ваша помощь будет оценена.Спасибо

Ответы [ 4 ]

9 голосов
/ 13 декабря 2011

Вы можете просто сделать что-то простое и прямое в строке, например: 

<input type="radio" name="radioBtn" id="radioBtn1" value="A" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" />
<input type="radio" name="radioBtn" id="radioBtn2" value="B" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/>
<input type="radio" name="radioBtn" id="radioBtn3" value="C" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/>
0 голосов
/ 13 декабря 2011

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

http://jsfiddle.net/C9At9/3/

HTML: 

<input type="radio" name="radioBtn" id="radioBtn1" value="A" onmouseup="toggle(this);"/>
<input type="radio" name="radioBtn" id="radioBtn2" value="A" onmouseup="toggle(this);" />
<input type="radio" name="radioBtn" id="radioBtn3" value="A" onmouseup="toggle(this);"/>

Javascript: 

function toggle(radioBtn)
 {   
   if(radioBtn.checked)
   {
     setTimeout("disableRadio('"+radioBtn.id+"')",10);
   } else {
     radioBtn.checked = true;
   }
 }

function disableRadio(radioId) {
    el = window.document.getElementById(radioId);
    el.checked = false;
}

Ваш код не работал, потому что установщик javascript отменяется событиями щелчка html или чем-то еще. Я не знаю, как объяснить это правильно, но задержка решает вашу проблему.

Надеюсь, это поможет!

0 голосов
/ 13 декабря 2011

Вы можете обойти стандартное поведение браузера для переключателей и добиться нужного эффекта переключения, создав дополнительную скрытую кнопку-переключатель и имитируя для нее событие click, когда пользователь отключает одну из кнопок. видимые кнопки. Смотрите рабочий пример в этом jsFiddle: http://jsfiddle.net/k73Nt/

0 голосов
/ 13 декабря 2011

Вести записи о том, какая опция RadioButton отмечена, а какая нет (может быть сделано с помощью скрытых полей или массива), и установить проверенную / непроверенную условно

...