Question

使用setAttribute（'checked'，true）更改radioButton的值会更改单选按钮的值，但不会触发更改事件。

这似乎不仅限于YUI或AlloyUI（例如参见Detecting a change in radio button/checkbox state）。

要解决该问题，我想在设置单选按钮的值时以编程方式触发更改事件。

我如何在Alloy UI（我使用Liferay 6.1 GA2）中做到这一点？

由于阿兰

一些细节：

html：

<aui:input type="radio" label="${viewMenuItem.label}" value="${viewMenuItem.value}"
   id="${messageWallDisplay.newMessageOptionName}${viewMenuItem.value}"
   name="${messageWallDisplay.newMessageOptionName}" data="${viewMenuItem.dataMap}"
   checked="${viewMenuItem.value == messageWallDisplay.newMessageOptionDefaultValue}"/>

事件委托设置（我也试过无线电按钮上的事件回调）：

  messageTypeRadioGroup.delegate('change', function (event){
     var option = event.currentTarget;
     if (option.get("checked")==true){
        showHideUserSelection(option);
     }
  }, 'input[type=radio]');

不触发更改事件的setAttribute：

MWC.newMessageDefaultOption.setAttribute('checked',true);

Answer 1

这里的答案看起来就像你想要完成的那样：Javascript: simulate a click on a link

如果MWC.newMessageDefaultOption是您的无线电节点，您可以执行以下操作：

MWC.newMessageDefaultOption.simulate('change');

如评论中所述，Simulate用于测试目的。为了最佳实践：

var doThingsOnChangeFunc = function(arg1, arg2) {
    // do things!
}

myNode.on(
    'change',
    function(event) {
        var arg1 = event.currentTarget;
        var arg2 = "something";

        doThingsOnChange(arg1, arg2);
    }
);

然后在您以编程方式更改单选按钮时复选框：\

myNode.setAttribute('checked', true);

doThingsOnChange(arg1, arg2);

Answer 2

我最终重构了代码，通过回调替换了MWC.newMessageDefaultOption变量：一个选择默认单选按钮并执行与事件处理程序相同的后续操作的函数。

Answer 3

请尝试以下代码，

var allRadios = A.all( "input[type='radio']" );
        allRadios.on( 'change', function(e) {
            var portletNamespace='<portlet:namespace/>';
            var selectedRadioButtonValue = e.currentTarget.get('value');
            // add your custom code here
    });

上面的代码将更改事件添加到所有单选按钮，当更改事件发生时，它将执行函数内的代码。

如果您还需要更多信息，请与我们联系

在AlloyUI（或我认为是YUI3）中，如何在使用setAttribute检查单选按钮时触发更改事件？

3 个答案: