在HTML中获取活动标签名称

Question

我有以下代码行：

<div>                                                                       
    <label>Property type</label>                                            

    <div class="btn-group btn-group-justified" data-toggle="buttons">       
        <div class="btn-group">                                             
            <label class="btn btn-default">                                 
                <input name="FIRST" value="2011" type="radio">HDB            
            </label>                                                        
        </div>                                                              

        <div class="btn-group">                                             
            <label class="btn btn-default active">                          
                <input name="SECOND" value="2012" type="radio">Condo / Apt    
            </label>                                                        
        </div>                                                              

        <div class="btn-group">                                             
            <label class="btn btn-default">                                 
                <input name="THIRD" value="2013" type="radio">Landed
            </label>                                                        
        </div>                                                              
    </div>                                                                  
</div> 

现在我的问题是：如何获得输入标记的名称，该标记在标签中突出显示为活动状态（来自JavaScript或JQuery）。

在上述情况中，答案应为： SECOND

Answer 1

如果只有一个有效标签：

$('.active').find('input').attr("name");

感谢JeetDaloneboy提供此JSFiddle示例here。

Answer 2

＆＃13;

＆＃13;

var myname = $('.active').children('input').attr('name')
console.log(myname);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio">Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用jQuery最简单的选择是：

// find the <input> descendant of a <label> element 
// with the class-name of 'active':
var name = $('label.active input')
  // retrieve its 'name' property:
  .prop('name');

console.log(name); // 'SECOND'

＆＃13;

＆＃13;

var name = $('label.active input').prop('name');

console.log(name);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio">Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，如果有多个<label>元素的类别为active，则可以选择以下内容：

// using map() to form an array-like structure of
// formed from the collection:
var names = $('label.active input').map(function(){

  // returning the name property of each of the
  // found <input> elements:
  return this.name;

// using get() to turn the map into an Array:
}).get();

console.log(names); // ['SECOND', 'THIRD']

＆＃13;

＆＃13;

var name = $('label.active input').map(function() {
  return this.name;
}).get();

console.log(name);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio">Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果＆＃39;有效＆＃39; <label>上的类意味着<input>本身已经过检查，那么更简单的解决方案可能是直接选择已检查的<input>：

// finding the <input> element that is checked,
// and recovering its 'name' property:
var name = $('input:checked').prop('name');

console.log(name); // 'SECOND'

＆＃13;

＆＃13;

var name = $('input:checked').prop('name');

console.log(name);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio" checked>Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

此外，在普通的JavaScript中，这很容易实现，大致相同：

// using document.querySelector() to retrieve the first, if any,
// element which matches the supplied CSS selector (finding
// an <input> element which is checked, and then retrieving the
// 'name' property from that element node:
var name = document.querySelector('input:checked').name;

console.log(name); // 'SECOND'

＆＃13;

＆＃13;

var name = document.querySelector('input:checked').name;

console.log(name);

＆＃13;

<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio" checked>Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果没有与提供的选择器匹配的元素，document.querySelector()将返回null，在尝试检索属性之前，值得检查匹配是否存在：

// finding the first, if any, <input> element that is checked:
var checkedElement = document.querySelector('input:checked');

// if the checkedElement variable is truthy (not-null in this
// case):
if (checkedElement) {

  // we retrieve the value of the 'name' property from
  // the <input> element-node:
  var name = checkedElement.name;

  console.log(name); // 'SECOND'
}

＆＃13;

＆＃13;

var checkedElement = document.querySelector('input:checked');

if (checkedElement) {
  var name = checkedElement.name;
  console.log(name);
}

＆＃13;

<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio" checked>Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

当然，也可以通过普通JavaScript在父<input>元素上存在active类名来选择<label>：

// finding the first <input> element child of a <label>
// element with the class-name of, or including, 'active':
var input = document.querySelector('label.active input');

// if the input variable is truthy (not-null in this case):
if (input) {

  // we retrieve the 'name' property from the <input>
  var name = input.name;
  console.log(name); // 'SECOND'
}

＆＃13;

＆＃13;

var input = document.querySelector('label.active input');

if (input) {
  var name = input.name;
  console.log(name);
}

＆＃13;

<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio">Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果可以有多个活动的<label>元素 - 例如，在复选框的情况下 - 则可以使用以下内容来返回<input>个名称的数组：

// retrieving a collection of all elements matching the
// supplied selector:
var inputs = document.querySelectorAll('label.active input'),

  // converting the array-like collection into an Array,
  // using Array.from():
  inputArray = Array.from(inputs),

  // iterating over the Array using Array.prototype.map(),
  // to return a new Array:
  inputNames = inputArray.map(function(input) {

    // returning the name of the <input> node to
    // the created Array:
    return input.name;
  });

console.log(inputNames); // ['SECOND', 'THIRD']

＆＃13;

＆＃13;

var inputs = document.querySelectorAll('label.active input'),
  inputArray = Array.from(inputs),
  inputNames = inputArray.map(function(input) {
    return input.name;
  });

console.log(inputNames);

＆＃13;

<div>
  <label>Property type</label>

  <div class="btn-group btn-group-justified" data-toggle="buttons">
    <div class="btn-group">
      <label class="btn btn-default">
        <input name="FIRST" value="2011" type="radio">HDB
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="SECOND" value="2012" type="radio">Condo / Apt
      </label>
    </div>

    <div class="btn-group">
      <label class="btn btn-default active">
        <input name="THIRD" value="2013" type="radio">Landed
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

参考文献：

• CSS：
  • :checked pseudo-class。
• JavaScript的：
  • Array.from()。
  • Array.prototype.map()。
  • document.querySelector()。
  • document.querySelectorAll()。
• jQuery的：
  • get()。
  • map()。
  • prop()。