Un Select or Select check box using 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.

post the error `SCRIPT5022: Syntax error, unrecognized expression: unsupported pseudo: j_idt78 ` in google! Maybe add 'jsf' to it — Kukeltje, Nov 08 '17 at 07:51
Possible duplicate of [Jquery selecting an ID with a colon in it](https://stackoverflow.com/questions/7434215/jquery-selecting-an-id-with-a-colon-in-it) — Jasper de Vries, Nov 08 '17 at 08:25
Please note you can DRY your WET code by writing `$("#...positive").attr('checked', (propertyName == 'positive'));` — Jasper de Vries, Nov 08 '17 at 08:31
It's a duplicate like @jasperdevries states. PF has shortcut for doing this in the PF.escapeClientId javascript function. See the docs. — Kukeltje, Nov 09 '17 at 10:21

score 0 · Answer 1 · answered Nov 07 '17 at 21:39

0

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

answered Nov 07 '17 at 21:39

fila90

1,439
11
11

score 0 · Answer 2 · answered Nov 07 '17 at 21:55

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;
  });
});

Un Select or Select check box using javascript

2 Answers2