Как вызвать функцию по событию кнопки и состоянию радиокнопки

@dry fig · Регистрация: 25.03.2016

Студворк — интернет-сервис помощи студентам

Дано: кнопка, радиокнопка и функция, которая должна вызываться строго по двум условиям (по И):
- по нажатию кнопки
- и при определенном положении радиокнопки
При этом к кнопке и радиокнопке желательно обращаться по id.

Код:

HTML5
1
2
3
4
5
6
7
<html>
<body>  
<button id='but_id'>click me</button>
<input type=radio name='radiobutton' value="1" id="labeled_1" checked/>
<input type=radio name='radiobutton' value="2" id="labeled_2"/>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>    
 
  function myAlert() {
    alert("Функция вызвана");
  }
 
  // читаем состояние радиокнопки
  var stateRadio = document.getElementById('labeled_1').value;
 
  // ХОЧЕТСЯ ПОЛУЧИТЬ ЧТО-ТО ПОДОБНОЕ (хотя и понятно, что работать так оно не будет):
  if ((stateRadio==2) && (but_id.onclick))
  {
    myAlert;
  } 
</script>

@Padonak · 25.03.2016, 19:51

можно попробовать так:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<script>    
function myAlert(){
// читаем состояние радиокнопки
var stateRadio = document.querySelector('#ff').radiobutton.value;
 
// ХОЧЕТСЯ ПОЛУЧИТЬ ЧТО-ТО ПОДОБНОЕ (хотя и понятно, что работать так оно не будет):
if((stateRadio==2) && (event.target.id=='but_id')){
alert("Функция вызвана");
}
}
onload=function(){
document.getElementById('but_id').onclick=myAlert;
} 
</script> 
</head>
<body>  
<button id="but_id">click me</button>
<form id="ff">
<input type="radio" name="radiobutton" value="1" checked />
<input type="radio" name="radiobutton" value="2" />
</form>
</body>
</html>

@dry fig · 26.03.2016, 13:34 **[ТС]**

Всем ответившим большое спасибо. Хорошо, что мир не без добрых людей )

Добавлено через 13 часов 23 минуты
Не пойму, почему в строке 9 состояние радиокнопки считывается, а в моем случае - нет:

JavaScript
1
2
var stateRadio = document.querySelector('#ff').radiobutton.value; // исходный вариант, работает
var stateRadio = document.getElementById('labeled_1').value;      // альтернативный вариант, не работает

Добавлено через 1 час 21 минуту

Сообщение от dry fig

Не пойму, почему в строке 9 состояние радиокнопки считывается, а в моем случае - нет

Разобрался. Дело было не в бабине ) Так что проехали.

Привожу окончательный работающий вариант кода:

HTML5
1
2
3
4
5
6
7
8
9
  <head>
    <meta charset="utf-8" />
    <title>Вызов функции по событию кнопки и состоянию радиокнопки</title>
  </head>
  <body>  
    <button id='but_id'>click me</button>
    <input type='radio' name='radiobutton' value='1' id='labeled_1' checked />
    <input type='radio' name='radiobutton' value='2' id='labeled_2'/>
  </body>

JavaScript
1
2
3
4
5
6
7
8
  <script>
    but_id.onclick = myAlert;
    function myAlert(){
      if (labeled_1.checked) {
        alert("Функция вызвана");
      }
    }       
  </script>

Еще раз всем спасибо за поддержку.

@Padonak · 26.03.2016, 13:59

можно и без использования формы сделать:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<script>    
onload=function(){
document.getElementById('but_id').onclick=function(){
var val=document.querySelector('[name=radiobutton]:checked').value;
if((val==2) && (event.target.id=='but_id')){
alert("Функция вызвана");
}
}
} 
</script> 
</head>
<body>  
<button id="but_id">click me</button>
<input type="radio" name="radiobutton" value="1" checked />
<input type="radio" name="radiobutton" value="2" />
</body>
</html>

Радиокнопка - это переключатель, его value - это value выделенного кружочка. А

JavaScript
1
var stateRadio = document.getElementById('labeled_1').value

всегда будет равно "1", независимо от того, какой кружок в данный момент отмечен.

@dry fig · 26.03.2016, 15:27 **[ТС]**

Сообщение от Padonak

можно и без использования формы сделать

У меня так и сделано.
А с радиокнопкой - да, все именно так, как Вы написали, это я уже понял.

Пока все же не могу решить свою задачу "красиво". Дано: двухпозиционная радиокнопка и две таблицы. Таблицу 1 можно редактировать, установив радиокнопку в положение 1, таблицу 2 - установив радиокнопку в положение 2.
Код по первоначальному замыслу должен иметь следующий вид:

HTML5
1
2
3
4
5
<button id='id_button'>Редактировать</button>
<input type='radio' name='radiobutton' value='1' id='labeled_1' checked />
<input type='radio' name='radiobutton' value='2' id='labeled_2'/>
<table id='id_table1'>
<table id='id_table2'>

JavaScript
1
2
3
4
5
    function editTable(id_table) {
      if ((labeled_2.checked) && (id_button.onclick)) {
        // код, редактирующий таблицу (в нашем случае таблицу 2, т.к. выбрано второе состояние радиокнопки)
      }
    }

Однако одним-единственным параметром id_table обойтись не получается в силу того, что радиокнопку можно прочитать только в теле функции. Поэтому приходится добавлять второй параметр id_table, вот так:

JavaScript
1
2
3
4
5
    function editTable(id_table_1, id_table_2) {
      if (labeled_2.checked) {
      // код, редактирующий таблицу;
      }
    }

А это, согласитесь, некрасиво. Это же функция, как-никак.

@Padonak · 26.03.2016, 15:41

А если просто написать ф-цию редактирования таблиц, выбирая таблицу как-то так:

JavaScript
1
2
3
4
5
6
7
8
9
10
function editTab(n){
var currentTab=document.getElementById('id_table'+n);
// тут ваш код, редактирующий таблицу
}
 
onload=function(){
document.getElementById('id_button').onclick=function(){
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}

@dry fig · 26.03.2016, 17:07 **[ТС]**

Сообщение от Padonak

А если просто написать ф-цию редактирования таблиц, выбирая таблицу как-то так:

Вариант интересен с точки зрения находчивости - т.е. мы id_table передаем в функцию не напрямую, а в виде строки, "склеивая" 'id_table' и значение радиокнопки.
Но неужели нет более простого способа? Как-то не хочется терять надежду, знаете ли )

@Padonak · 26.03.2016, 17:12

А что такого сложного вот в данном коде? Куда еще проще?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html>
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<style>
button, input[name="radiobutton"]{
display:inline;
cursor:pointer;
margin:10px;
}
hr{
width:50%;
margin:10px;
}
table{
min-width:30%;
border:1px dashed #000;
border-radius:5px;
background-color:transparent;
margin:20px;
}
table td{
border:1px solid #ccc;
border-radius:5px;
text-align:center;
}
.active{
border:2px dashed Crimson;
background-color:#f8f8ff;
}
</style>
<script>
function _(id){return document.getElementById(id);}
 
function editTab(n){
var i=1;
    while(_('id_table'+i)!=undefined){
    _('id_table'+i).className='';
    i++;
    }
    /* "Редактирование" */
_('id_table'+n).className='active';
}
 
onload=function(){
_('id_button').onclick=function(){
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}
</script> 
</head>
<body>  
<center>
<button id="id_button">Редактировать</button>
<input type="radio" name="radiobutton" value="1" checked />
<input type="radio" name="radiobutton" value="2" />
 
<hr />
 
<table id="id_table1" cellspacing="3" cellpadding="3">
<tr><td colspan="3">id_table1</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
 
<table id="id_table2" cellspacing="3" cellpadding="3">
<tr><td colspan="3">id_table2</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</center>
</body>
</html>

@dry fig · 26.03.2016, 17:41 **[ТС]**

Сообщение от Padonak

А что такого сложного вот в данном коде? Куда еще проще?

Ну, например, новичку вроде меня нужно немного поразбираться )
Говоря о простом, я вот что имел в виду: я думал, что конструкция типа <событие нажатия кнопки> && <проверка состояния радиокнопки> = <вызов функции> возможна.
Большое спасибо за Ваш код.

@Padonak · 26.03.2016, 19:32

<событие нажатия кнопки> && <проверка состояния радиокнопки> = <вызов функции>

JavaScript
1
2
3
4
5
6
7
8
/* по окончании процесса загрузки окна(документа) */
onload=function(){
/* при событии клика(нажатия) кнопки */
_('id_button').onclick=function(){
/* выполнить ф-цию editTab(в зависимости от состояния кнопки) */
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}

все происходит именно так :-)

@dry fig · 26.03.2016, 22:02 **[ТС]**

Не хочу напрашиваться (но тем не менее, хе-хе, невольно это делаю)... Мнэ-э-э, а можете сделать вариант без нижнего подчеркивания? Просто интересно, как оно будет выглядеть.

@Padonak · 27.03.2016, 10:01

НП просто для экономии телодвижений и удобочитаемости кода было использовано

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function editTab(n){
var i=1;
    while(document.getElementById('id_table'+i)!=undefined){
    document.getElementById('id_table'+i).className='';
    i++;
    }
    /* "Редактирование" */
document.getElementById('id_table'+n).className='active';
}
 
onload=function(){
document.getElementById('id_button').onclick=function(){
editTab(document.querySelector('[name=radiobutton]:checked').value);
}
}

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@dry fig 0 / 0 / 0 Регистрация: 25.03.2016 Сообщений: 8
	26.03.2016, 22:02 [ТС]
	Не хочу напрашиваться (но тем не менее, хе-хе, невольно это делаю)... Мнэ-э-э, а можете сделать вариант без нижнего подчеркивания? Просто интересно, как оно будет выглядеть. 0