Формируйте радио-кнопки с ненавязчивым JavaScript - PullRequest
Новая
       35

Формируйте радио-кнопки с ненавязчивым JavaScript

4 голосов
/ 04 декабря 2011

Как преобразовать следующий код в ненавязчивый JavaScript? 

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <script type="text/javascript">
        function ar_change(){
            if (document.ar_form.ar_type[0].checked)
                var txt = "";
            else if (document.ar_form.ar_type[1].checked)
                var txt = "first text.";
            else if (document.ar_form.ar_type[2].checked)
                var txt = "second text.";
            else if (document.ar_form.ar_type[3].checked)
                var txt = "third text.";
            else if (document.ar_form.ar_type[4].checked)
                var txt = "forth text.";
            document.ar_form.ar_text.value=txt;
        }
    </script>
</head>
<body>
    <form name="ar_form" action="." method="post">
        <textarea name="ar_text"></textarea><br>
        <input type="radio" name="ar_type" value="0" onclick="ar_change()" checked>no text<br>
        <input type="radio" name="ar_type" value="1" onclick="ar_change()">text 1<br>
        <input type="radio" name="ar_type" value="2" onclick="ar_change()">text 2<br>
        <input type="radio" name="ar_type" value="3" onclick="ar_change()">text 3<br>
        <input type="radio" name="ar_type" value="4" onclick="ar_change()">text 4<br>
        <input type="submit" />
    </form>
</body>
</html>

Этот javascript изменяет содержимое, когда пользователь выбирает кнопку радиона. текущий скрипт работает, я хочу удалить все «onclick» из тегов и проверить, что кнопка redio была изменена с помощью js. как мне это сделать?

Ответы [ 2 ]

2 голосов
/ 04 декабря 2011

Никаких изменений в форме не требуется (за исключением удаления обработчика onclick):

Обычный JS:

DEMO здесь 

window.onload=function() {
  var rads = document.getElementsByName("ar_type");
  for (var i=0,n=rads.length;i<n;i++) {
    rads[i].onclick=function() {
      this.form.ar_text.value=["","first_txt","second_txt","third_txt","fourth_txt","fifth_txt"][this.value];
    }
    if (rads[i].checked) rads[i].click(); // set the value onload
  }
}

JQuery:

DEMO 

$(document).ready(function() {
  $('input[name=ar_type]:radio').click(function() {
    this.form.ar_text.value=["","first_txt","second_txt","third_txt","fourth_txt","fifth_txt"][this.value];
  });
    $('input[name=ar_type]:radio').filter(":checked").click(); // IMPORTANT!!!
});
0 голосов
/ 04 декабря 2011 
var artexts = [
    "",
    "first text.",
    "second text.",
    "third text.",
    "forth text."
];
ondocumentload(function() { // use any known library thing or your owns
    var radios = document.getElementsByName("ar_type");
    for (var i=0; i<radios.length; i++)
        radios[i].addEventListener("change", function() {
            for (var i=0; i<radios.length; i++)
                if (radios[i].checked)
                     document.getElementById('txtarea').value = artexts[radios[i].value];
        }, false);
});

Не используйте * -атрибуты в html.

...