Question

当我们更改其中任何一个时，我正在编写一些突出显示“广播组”中所有<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(...)使用元素的上下文）。

Answer 1

不要在表单上执行.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 ...
            }
        }
    }
}

Answer 2

在盒子外面思考。将非标准属性添加到<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')

Answer 3

如果查看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;
};

当按钮类型为＆＃34; radio＆＃34;时，他们在其小部件（＆＃34; ui.button＆＃34;）点击事件处理程序中使用它，以便他们可以删除＆＃34; ui-状态活性＆＃34;来自所有其他按钮的课程。

如何使用jQuery在同一个逻辑“组”中找到所有单选按钮？

如果我有一个元素，那么找到属于其“组”的无线电的最佳方法是什么？

3 个答案: