dojo dijit.form.复选框的工作方式类似于单选按钮,但不会更改UI组件

wh6knrhe  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(137)

由于某种原因,我的dojo复选框没有更新。

function booleanWidget(values, units, defaultValues)
{
var container, widget,onChangeFunction;
container = widgetContainer();
onChangeFunction = function (e)
{
    var orig, value, siblingCheckboxes, i, thisNodeCheckedStatus;
    orig = this.domNode.parentNode;
    // has correct value for component that checked or unchecked.
    thisNodeCheckedStatus = this.checked;
    siblingCheckboxes = dojo.query( "input[type=checkbox]",orig);


    for (i=0; i< siblingCheckboxes.length; i++)
    {
        if( this.id!=siblingCheckboxes[i].id )
        {
            // when I print out these console logs.  I see that I am always processing correct sibling.
            console.log("i="+i+" TARGET CONDITION="+!thisNodeCheckedStatus+" id="+siblingCheckboxes[i].id);
            console.log("siblingCheckboxes["+i+"]="+siblingCheckboxes[i]);
            console.log("siblingCheckboxes["+i+"].checked="+siblingCheckboxes[i].checked);
            console.log("siblingCheckboxes["+i+"].getAttribute(\"checked\")="+siblingCheckboxes[i].getAttribute("checked") );
            console.log("siblingCheckboxes["+i+"].getAttribute(\"value\")="+siblingCheckboxes[i].getAttribute("value"));

// **** here*****  what do I need to do to get the checkbox to check or uncheck and display.  
// I can do any of the 3 commented out lines to try an update my checkboxes. see comment after line for result.  however sibling checkboxes does not remove check
//                siblingCheckboxes[i].checked = !thisNodeCheckedStatus; // changes .checked but not getAttribute.
//               siblingCheckboxes[i].setAttribute("checked", !thisNodeCheckedStatus); // changes : getAttribute() changes to false but not .checked
//                siblingCheckboxes[i].attr("checked", "!thisNodeCheckedStatus");  //receive : siblingCheckboxes[i].attr is not a function
            console.log("**siblingCheckboxes["+i+"].checked="+siblingCheckboxes[i].checked);
            console.log("**siblingCheckboxes["+i+"].getAttribute(\"checked\")="+siblingCheckboxes[i].getAttribute("checked") );

        }
    }

    validForm();
}

widget = new dijit.form.CheckBox({
    name: 'value',
    value: 'Y',
    onChange: onChangeFunction
});
dojo.place(widget.domNode, container);
dojo.place("<span>true</span>", container);
if (!defaultValues || (defaultValues && defaultValues[0] === "Y")) {
    widget.attr("checked", true);
}

widget = new dijit.form.CheckBox({
    name: 'value',
    value: 'N',
    onChange: onChangeFunction
});
dojo.place(widget.domNode, container);
dojo.place("<span>false</span>", container);
if (defaultValues && defaultValues[1] === "N") {
    widget.attr("checked", true);
}

return container;
}
sd2nnvve

sd2nnvve1#

我发现您需要使用set而不是attr。请尝试使用:

widget.set('checked', true);

应该会立刻更新小工具。

y3bcpkx1

y3bcpkx12#

在下面的javascript片段中,我需要像单选按钮一样使用2个复选框。下面是生成的html

<span class="valueField">
    <span>
        <div class="dijit dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked dijitChecked" wairole="presentation" role="presentation" widgetid="dijit_form_CheckBox_0">
             <input id="dijit_form_CheckBox_0" class="dijitReset dijitCheckBoxInput" type="checkbox" dojoattachevent="onclick:_onClick" dojoattachpoint="focusNode" name="value" value="Y" tabindex="0" style="-moz-user-select: none;" aria-pressed="true">
         </div>
         <span>true</span>
         <div class="dijit dijitReset dijitInline dijitCheckBox" wairole="presentation" role="presentation" widgetid="dijit_form_CheckBox_1">
              <input id="dijit_form_CheckBox_1" class="dijitReset dijitCheckBoxInput" type="checkbox" dojoattachevent="onclick:_onClick" dojoattachpoint="focusNode" name="value" value="N" tabindex="0" style="-moz-user-select: none;" checked="false">
          </div>
           <span>false</span>
      </span>
 </span>

console.log显示属性和.checked更改正确,但浏览器中显示的复选框未更新。
我用的是firefox5.

function booleanWidget(values, units, defaultValues)
{
var container, widget,onChangeFunction;
container = widgetContainer();
onChangeFunction = function (e)
{
    var orig, value, siblingCheckboxes, i, thisNodeCheckedStatus;
    orig = this.domNode.parentNode;
    // has correct value for component that checked or unchecked.
    thisNodeCheckedStatus = this.checked;
    siblingCheckboxes = dojo.query( "input[type=checkbox]",orig);

    console.log("TARGET CONDITION="+!thisNodeCheckedStatus);


    for (i=0; i< siblingCheckboxes.length; i++)
    {
        console.log(siblingCheckboxes[i]);
        console.log(" id="+siblingCheckboxes[i].id+ "siblingCheckboxes["+i+"]="+siblingCheckboxes[i]);
        console.log("siblingCheckboxes["+i+"].checked="+siblingCheckboxes[i].checked);
        console.log("siblingCheckboxes["+i+"].getAttribute(\"checked\")="+siblingCheckboxes[i].getAttribute("checked") );
        // console.log("siblingCheckboxes["+i+"].get(\"checked\")="+siblingCheckboxes[i].get("checked") );         //siblingCheckboxes[i].get is not a function
        console.log("siblingCheckboxes["+i+"].getAttribute(\"value\")="+siblingCheckboxes[i].getAttribute("value"));
        //
        if( this.id!=siblingCheckboxes[i].id )
        {
            console.log("targeting "+1);
            siblingCheckboxes[i].parentNode.parentNode.attributes.isContentEditable=true;
            // when I print out these console logs.  I see that I am always processing correct sibling.

            siblingCheckboxes[i].checked = !thisNodeCheckedStatus; // changes .checked but not attribute.checked.
            siblingCheckboxes[i].setAttribute("checked", !thisNodeCheckedStatus); // changes attributes.checked but not .checked
            //                siblingCheckboxes[i].attr("checked", "!thisNodeCheckedStatus");  //gives me : siblingCheckboxes[i].attr is not a function
            //               siblingCheckboxes[i].set("checked",false);  //gives me : siblingCheckboxes[i].set is not a function

        }
        console.log("**siblingCheckboxes["+i+"].checked="+siblingCheckboxes[i].checked);
        console.log("**siblingCheckboxes["+i+"].getAttribute(\"checked\")="+siblingCheckboxes[i].getAttribute("checked") );
        console.log(siblingCheckboxes[i].parentNode.parentNode);
    }

    validForm();
}

widget = new dijit.form.CheckBox({
    name: 'value',
    value: 'Y',
    onChange: onChangeFunction
});
dojo.place(widget.domNode, container);
dojo.place("<span>true</span>", container);
if (!defaultValues || (defaultValues && defaultValues[0] === "Y")) {
    widget.attr("checked", true);
}

widget = new dijit.form.CheckBox({
    name: 'value',
    value: 'N',
    onChange: onChangeFunction
});
dojo.place(widget.domNode, container);
dojo.place("<span>false</span>", container);
if (defaultValues && defaultValues[1] === "N") {
    widget.attr("checked", true);
}

return container;
}

一个开发者记得听说过一个reload,或者刷新是在span上。我试着沿着树向上浏览到span节点,但是我找不到一个refreshor reload方法。有没有想过如何告诉浏览器刷新或者重新加载span。

相关问题