如何使用jQuery Closest（）函数获取元素的Id

Question

我有以下HTML结构，当我选择我的选择器时，我无法获得单选按钮的值，如下面的Jquery代码中所述。

<div class="option-radio-box">
<input id="pixel" class="css-checkbox" type="radio" value="pixel" name="type">
<label class="css-label" for="radio1">
<img width="25" height="20" alt="" src="images/opt-ico1.png">
Pixel by
<span>Pixel</span>
</label>
</div>
<div class="option-radio-box">
<input id="pair" class="css-checkbox" type="radio" checked="checked" value="pair" name="type">
<label class="css-label" for="radio2">
<img width="25" height="20" alt="" src="images/opt-ico2.png">
Duplicate
<span>Search</span>
</label>
</div>

遵循Jquery代码，

  $('.css-label').on('click', function() {
  alert(jQuery(this).closest('input:radio[name=type]').id);});

Answer 1

单选按钮不是父节点，而是兄弟节点，jQuery对象没有.id属性

$('.css-label').on('click', function() {
      alert( $(this).siblings('input:radio[name=type]').prop('id') );
});

FIDDLE

Answer 2

closest()搜索元素的祖先，而input元素是HTML中的兄弟。你可以这样做：

$('.css-label').on('click', function() {
  alert($(this).siblings('input[name="type"]:checked').val());
});

Answer 3

试试这个 的 JSFIDDLE

$('.css-label').on('click', function() {
    parentElement = jQuery(this).parents('.option-radio-box');
alert($("input[type='radio']",parentElement).attr("id"));  
});