2

我正在编写一些代码，<input type=radio />当其中任何一个发生更改时，这些代码会突出显示“无线电组”中的所有内容。
在收音机“更改”事件的事件处理程序中，我使用以下代码查找所有其他类似的收音机：

radioHandler: function (event) {
    var element = $(this);
    var name = element.attr("name");
    // Find all radios in the same group:
    element.closest("form")
        .find("input[type=radio][name='" + name + "']")
        .each(function(){
            ... etc ...
        });
},

如果收音机确实包含在表单中，这将非常有效。但是，如果表格之外
也有收音机，我也希望它能够工作。

例如，假设所有收音机都使用相同name的 ，以下表示 3 个不同的收音机组（并且所有浏览器都以这种方式运行）：

       o Radio A | o Radio B | o Radio C          (Group - no form)
<form> o Radio D | o Radio E | o Radio F </form>  (Group - form 1)
<form> o Radio G | o Radio H | o Radio I </form>  (Group - form 2)

如果我有一个元素，那么仅找到属于其“组”的收音机的最佳方法是什么？

此外，对于奖励积分......如果该元素不是当前文档的一部分 - 即，它包含在另一个“分离”上下文中怎么办？当前的解决方案工作正常（因为element.closest(...)使用元素的上下文）。

4

3 回答 3

2

不要在表单上执行 .find，而是在整个文档上执行它：

$("input[type=radio][name='" + name + "']").each(function() {
    ... etc ...
});

除非我不明白这里的问题？

编辑我没有测试下面的代码，但它可能会让你知道如何去做。

radioHandler: function (event) {
    var element = $(this);
    var name = element.attr("name");
    // Find all radios in the same group:
    if (element.parents().find("form").length > 0) {
        name.closest("form").find("input[type=radio][name='" + name + "']")
        .each(function(){
            ... etc ...
        });
    } else {
        $("input[type=radio][name='" + name + "']").each(function() {
            if (!$(this).parents().find("form").length) {
                ... etc ...
            }
        }
    }
}
于 2012-01-21T09:44:08.680 回答
0

创造性思考。将非标准属性添加<input type="radio" />到<form>. 例如：

<input type="radio" outsideform="true" />

然后使用这样的 JQuery 选择器：

$('input[type=radio][outsideform=true]')

你也可以用 CSS 类做类似的事情。该类不必实际实现任何样式。

<input type="radio" class="outsideform" />

...和...

$('input[type=radio].outsideform')
于 2012-01-21T10:06:26.133 回答
0

如果您查看 jquery-ui.js 文件（我的版本 1.11.4），您可以看到它们在内部使用此函数来获取同一组中的所有单选按钮：

radioGroup = function( radio ) {
 var name = radio.name,
  form = radio.form,
  radios = $( [] );
 if ( name ) {
  name = name.replace( /'/g, "\\'" );
  if ( form ) {
   radios = $( form ).find( "[name='" + name + "'][type=radio]" );
  } else {
   radios = $( "[name='" + name + "'][type=radio]", radio.ownerDocument )
    .filter(function() {
     return !this.form;
    });
  }
 }
 return radios;
};

当按钮类型为“radio”时，他们在其小部件（“ui.button”）单击事件处理程序中使用它，以便他们可以从所有其他按钮中删除“ui-state-active”类。

于 2016-01-20T04:15:47.557 回答