Javascript, чтобы получить текст отмеченных флажков

Question

Как я могу установить отмеченные флажки с помощью JavaScript для следующего HTML. Все мои флажки будут иметь идентификаторы следующим образом, как показано в HTML

SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0 
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1 
// ... and so on, up to 
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_n 

Я попытался с помощью следующего кода

var IDtoFind="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_" 
 
var txts = document.getElementsByTagName('input'); 
 
for (var i = 0; i < txts.length; ++i) { 
 
    if (txts[i].name.indexOf(IDtoFind)!=-1) { 
 
    if(txts[i].checked){ alert(txts[i].id); } 
 
    // targetId = txts[i].id; 
 
    } 
 
}

Но ее не работает. Ineed, чтобы получить текст в окошке метки

<table id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceTable" cellpadding="0" cellspacing="1"> 
 
<tbody> 
 
<tr> 
 
    <td> 
 
    <span class="ms-RadioText" title="NO SECURITY ISSUE Observed"> 
 
     <input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked"> 
 
     <label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0">NO SECURITY ISSUE Observed</label> 
 
     </span> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    <span class="ms-RadioText" title="Staff NOT wearing identification/name badge"> 
 
     <input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1" type="checkbox"> 
 
     <label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1">Staff NOT wearing identification/name badge</label> 
 
    </span> 
 
    </td> 
 
</tr> 
 
</tbody> 
 
</table>

Answer 1

Вы можете использовать nextelementsibling свойство как

function get() { 
 
    var inputs = document.querySelectorAll('input[type="checkbox"][id^="SECURITY_"]'), 
 
    labels = []; 
 
    for (var i = 0; i < inputs.length; i++) { 
 
    if (inputs[i].checked) { 
 
     labels.push(inputs[i].nextElementSibling.innerHTML.trim()) 
 
    } 
 
    } 
 
    alert(labels) 
 
}

<table id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceTable" cellpadding="0" cellspacing="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <span class="ms-RadioText" title="NO SECURITY ISSUE Observed"> 
 
      <input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked"> 
 
      <label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0">NO SECURITY ISSUE Observed</label> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <span class="ms-RadioText" title="Staff NOT wearing identification/name badge"> 
 
      <input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1" type="checkbox"> 
 
      <label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1">Staff NOT wearing identification/name badge</label> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button onclick="get()">Get</button>

---

Примечание: Вы можете SIMPL римента селектор флажок, если вы можете добавить класс этих флажков

<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked" class="security-multichoiceoption"/> 

затем

inputs = document.getElementsByClassName('security-multichoiceoption') 

Answer 2

here я сделал демо, который возвращает массив Maching объектов вы можете просто добраться до элементов с помощью тех, функция там возвращает массив, поэтому those()[0].id просто вернет идентификатор первого выбранного элемента