使用javascript取消选择或选择复选框答案

【问题标题】：Un Select or Select check box using javascript使用javascript取消选择或选择复选框
【发布时间】：2018-04-20 10:28:36
【问题描述】：

我在使用 JSF 动态创建的表中有复选框，我得到如下 HTML 输出，

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

如果我选中一个复选框，那么其他两个应该取消选中，并且所有复选框都相同，任何时候都应该连续选中一个复选框。

以上是仅一行的示例，以及如何为N number rows[表格可能包含任意数量的行。]

以下是动态生成复选框的实际代码

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

我尝试了类似以下的操作，但仍然没有取消选中该行中的复选框，并在控制台中给了我以下异常

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

请帮我解决问题。

【问题讨论】：

在谷歌中发布错误SCRIPT5022: Syntax error, unrecognized expression: unsupported pseudo: j_idt78 ！也许添加'jsf'到它
Jquery selecting an ID with a colon in it的可能重复
请注意，您可以通过写$("#...positive").attr('checked', (propertyName == 'positive')); 来干燥您的 WET 代码
它像@jasperdevries 状态一样重复。 PF 在 PF.escapeClientId javascript 函数中有执行此操作的快捷方式。请参阅文档。

标签： javascript html jsf-2

【解决方案1】：

您为什么不直接使用type="radio" 按钮，它们本身就有所需的行为。只需确保同一行中的所有单选按钮都具有相同的name 属性

【讨论】：

【解决方案2】：

复选框输入有一个名为 checked 的属性，您可以将其更改为 true 或 false 以分别使它们被选中或取消选中。

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

查看下面的示例。 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;
  });
});

【讨论】：