使用JavaScript取消选择或选择复选框

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">

if i select one check box then other two should be un selected and it is same for all the checkbox, at any time only one check box should be selected in a row.

the above is the sample of only one row and how to do do this dynamically for N number rows[the table may contain any number of rows.]

the following is the actual code which generates the check boxes dynamically

<ui:repeat var="item" value="#{testController.itemsList}" varStatus="loop">
                    <p:row>
                        <p:column>
                            <h:outputText value="#{item.desc}" />
                        </p:column>
                        <p:column>
                            <h:outputText value="#{item.code}" />
                        </p:column>
                        <p:column>
                            <h:selectBooleanCheckbox value="#{testController.negative}" id="negative"> </h:selectBooleanCheckbox>
                        </p:column>
                        <p:column>
                            <h:selectBooleanCheckbox value="#{testController.positive}"  id="positive"> </h:selectBooleanCheckbox>
                        </p:column>
                        <p:column>
                            <h:selectBooleanCheckbox value="#{testController.na}" id="na"> </h:selectBooleanCheckbox>
                        </p:column>
                    </p:row>
                    </ui:repeat>

I tried something like the following but still it is not un selecting the check boxes in the row and gives me the following exception in the console

SCRIPT5022: Syntax error, unrecognized expression: unsupported pseudo: j_idt78



function selectUnSelect(elementName) {
             var fields = elementName.split(':');
             var formName = fields[0];
             var jsfId = fields[1];
             var fieldIndex = fields[2];
             var propertyName = fields[3];

             console.log(formName+":"+jsfId+":"+fieldIndex+":positive");

             if(propertyName == 'positive'){

                 $("#"+formName+":"+jsfId+":"+fieldIndex+":positive").attr('checked', true); 
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":negative").attr('checked', false); 
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":na").attr('checked', false);
             }
             if(propertyName == 'negative'){
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":positive").attr('checked', false); 
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":negative").attr('checked', true); 
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":na").attr('checked', false); 
             }
             if(propertyName == 'na'){
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":positive").attr('checked', false); 
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":negative").attr('checked', false); 
                 $("#"+formName+":"+jsfId+":"+fieldIndex+":na").attr('checked', true); 
             }
        }

Please help me to fix the issue.

Answer 1

why don't you just use type="radio" buttons, they have desired behavior natively. just make sure all radio buttons in the same row have same name attribute

Answer 2

checkbox inputs have a property named checked which you can change to true or false to make them checked or unchecked respectively.

document.getElementById('choice1').checked = true; // Check
document.getElementById('choice1').checked = false; // Uncheck

check out the example below. https://jsfiddle.net/1zty7mcL/

var checkboxes = [
    document.getElementById('choice1'),
  document.getElementById('choice2'),
  document.getElementById('choice3'),
];

var uncheckAll = function () {
  checkboxes.forEach(function (checkbox) {
    checkbox.checked = false;
  });
}

checkboxes.forEach(function (checkbox) {
  checkbox.addEventListener('click', function () {
    uncheckAll();
    this.checked = true;
  });
});