Question

我在使用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个数字行动态执行此操作[该表可能包含任意数量的行。]

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

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

请帮我解决问题。

Answer 1

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

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

使用javascript取消选中或选中复选框

2 个答案: