使用复选框名称选择/取消选择复选框

Question

I have check boxes in the table created dynamically using JSF and i get the HTML output like the following,

 <input name="testForm:j_idt78:0:negative" id="testForm:j_idt78:0:negative" onchange='PrimeFaces.ab({s:this,e:"change",p:"testForm:j_idt78:0:negative"});' type="checkbox">
<input name="testForm:j_idt78:0:positive" id="testForm:j_idt78:0:positive" onchange='PrimeFaces.ab({s:this,e:"change",p:"testForm:j_idt78:0:positive"});' type="checkbox">
<input name="testForm:j_idt78:0:na" id="testForm:j_idt78:0:na" onchange='PrimeFaces.ab({s:this,e:"change",p:"testForm:j_idt78:0:na"});' type="checkbox">

i get the following exception at the console : SCRIPT5022: Syntax error, unrecognized expression: unsupported pseudo: j_idt78

how do i select the checkbox based on the name attribute?

Answer 1

You'd use the CSS attribute selector :

 const inputId = 'testForm:j_idt78:0' const negativeId = inputId + ':negative' document.querySelector('input[type="checkbox"][name="' + negativeId + '"]').checked = true 

 <input name="testForm:j_idt78:0:negative" id="testForm:j_idt78:0:negative" type="checkbox"> <input name="testForm:j_idt78:0:positive" id="testForm:j_idt78:0:positive" type="checkbox"> <input name="testForm:j_idt78:0:na" id="testForm:j_idt78:0:na" type="checkbox">