Как кликнуть на radio элемент с заданным текстом

181

20 июня 2018, 10:00

На странице есть radio элемент, на который я хочу кликнуть. Таких элементов много, поэтому я хочу найти нужный и кликнуть на него.

Array.prototype.forEach.call(t, function(el) {
    // Do stuff here
    if (el.innerText == "Нужный элемент") {
        el.click()
    }
});

Почему-то данный клик не отрабатывается. Также пробовал check() - результат аналогичен.

<div class="radio">
    <label title="">
        <input type="radio" name="title" value="Н235"><!-- react-text: 149 -->Нужный элементы<!-- /react-text -->
    </label>
</div>

Answer 1

У input-а вообще нет текста внутри: Нужный элементы находится внутри label
Так как в innerText могут оказаться, например, пробельные символы в начале и в конце (а в вопросе вообще "Нужный элементы"), то либо нужно всё лишнее обрезать, либо вместо проверки на равенство строк использовать поиск подстроки в строке

В итоге получается так:

var t = document.querySelectorAll("label"); 
Array.prototype.forEach.call(t, function(el) { 
  if (el.innerText.indexOf("Нужный элемент") != -1) { 
    el.querySelector("input").click(); 
  } 
});

<div class="radio"> 
   <label title=""> 
      <input type="radio" name="title" value="Н234"/> 
      Совсем не тот элемент 
   </label> 
</div> 
<div class="radio"> 
   <label title=""> 
      <input type="radio" name="title" value="Н235"/> 
      Нужный элемент 
   </label> 
</div>

Если нужно не именно кликнуть на элемент, а просто выбрать нужный, то вместо click() имеет смысл устанавливать свойство checked:

el.querySelector("input").checked  = true;

Answer 2

Есть 2 способа решения вашей задачи:

Первый:

var elms  = document.querySelectorAll('label'); 
 
[].forEach.call(elms, function(el) 
{ 
	if(el.innerHTML.indexOf('Нужный элемент 149') >= 0) 
		el.click() 
});

<label><input type="radio" name="title" value="Н235"><!-- react-text: 149 -->Нужный элемент 149<!-- /react-text --></label><br> 
<label><input type="radio" name="title" value="Н236"><!-- react-text: 150 -->Нужный элемент 150<!-- /react-text --></label>

Второй:

var elms  = document.querySelectorAll('input'); 
 
[].forEach.call(elms, function(el) 
{ 
    if(el.value == 'Н236') 
		el.click() 
});

<label><input type="radio" name="title" value="Н235"><!-- react-text: 149 -->Нужный элемент 149<!-- /react-text --></label><br> 
<label><input type="radio" name="title" value="Н236"><!-- react-text: 150 -->Нужный элемент 150<!-- /react-text --></label>