同时使用多个条件的jQuery .find（）？

Question

我知道还有其他方法可以获取单选按钮值，但我想知道如何使用.find（）。

我只想记录所选单选按钮的值，因此需要同时找到两个条件：

带有name=area

的按钮

带有selected=selected

的按钮

<div class="radio">
  <label>
    <input class="track-order-change" type="radio" name="area" id="area1" value="area1" checked="checked">
    Area 1
  </label>
</div>
<div class="radio">
  <label>
    <input class="track-order-change" type="radio" name="area" id="area2" value="area2">
    Area 2
  </label>
</div>
<div class="radio">
  <label>
    <input class="track-order-change" type="radio" name="area" id="area3" value="area3">
    Area 3
  </label>
</div>

当类track-order-change的任何内容发生更改时，它将运行UpdateOrderSubmission函数。

$('.track-order-change').on('change', function() { updateOrderSubmission() });

我希望updateOrderSubmission函数控制记录所选单选按钮的值。

   var updateOrderSubmission = function() {
     var orderSubmission = {
       area: $('#submit-initial-form').find('[name=area],[checked=checked]').this.val()
     }
     console.log(orderSubmission)
   };

上面的代码不起作用。如何获取所选单选按钮的值？我需要.find()有两个条件（名称和检查），而不仅仅是一个条件。

更新

那么为什么$('#submit-initial-form').find('[name=area][checked=checked]').val();不起作用？它说＆＃34;取submit-initial-form ID并找到包含name=area和checked=checked的子元素并返回其值。

只有$('#submit-initial-form').find(':radio[name=area]:checked').val()有效。为什么你必须指定它是一个单选按钮？

Answer 1

我认为您可能需要使用:checked选择器

var updateOrderSubmission = function () {
    var orderSubmission = {
        area: $('#submit-initial-form').find('input[name=area]:checked').val()
    }
    console.log(orderSubmission)
};

演示：Fiddle

Answer 2

试试这个：

area: $('#submit-initial-form').find(':radio[name=area][checked]').val()

或：

area: $('#submit-initial-form').find(':radio[name=area]:checked').val()

Answer 3

游戏很晚，（忙于检查所有答案）但为什么没有人删除多余的find？

JSFiddle：http://jsfiddle.net/9GNpv/5/

$('#submit-initial-form input[name=area]:checked' ).val()

可以简化为：

$('#submit-initial-form [name=area]:checked' ).val()

http://jsfiddle.net/9GNpv/7/ 但我更喜欢选择器更加明确

更新

参考：http://api.jquery.com/category/selectors/

• 括号是属性过滤器（每个元素类型最多出现一个）。
• :是自定义过滤器（您可以使用自己的扩展jQuery - 见下文）。
• 没有任何暗示元素类型。

如果重复元素类型，可以应用多个属性过滤器，但这有点奇怪：

扩展自定义选择器：

这是向jQuery添加新的自定义选择器的示例：

jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input, [tabindex]');
    }
});

您可以这样使用：

var focusableElements = $(':focusable');

Answer 4

如果您向选择器添加逗号，则它将被视为多选择器

尝试，

var updateOrderSubmission = function() {
  var orderSubmission = {
   area: $('#submit-initial-form').find('[name=area][checked=checked]').val();
  }
};

Answer 5

试试这个

$('#submit-initial-form').find(".track-order-change:input[type=radio]:checked" ).val();

Answer 6

你可以找到这种方式

var domIds = $('#week').find("[data-status=open][data-item-id=stand-out]")
$("#result").html(domIds.text());