2013-12-16 2 views
1

С JQuery, как я могу оттянуть данных-значение или Id в этом HTMLНевозможно получить данные-значение из группы Radio

<div class="input-group"> 
    <div class="btn-group" data-toggle="buttons" id="OptVacant"> 
     <label class="btn btn-default"> 
      <input type="radio" name="OptVacantOrOccupied" data-value="1" id="1"> Vacant 
     </label> 
     <label class="btn btn-default"> 
      <input type="radio" name="OptVacantOrOccupied" data-value="0" id="0"> Occupied 
     </label> 
     <label class="btn btn-default"> 
      <input type="radio" name="OptVacantOrOccupied" data-value="2" id="2" checked="checked"> Show All 
     </label> 
    </div> 
</div> 

ответ

1

Это вернет идентификатор выбранного переключателя:

$("input[name='OptVacantOrOccupied']:checked").attr("id") 

Это будет возвращать данные, связанные с выбранным радио:

$("input[name='OptVacantOrOccupied']:checked").data("value"); 

Вы также можете прикрепить обработчик события к change событию всех радиоприемников:

$("input[name='OptVacantOrOccupied']").change(function(){ 
    console.log($("input[name='OptVacantOrOccupied']:checked").data("value")); 
}); 

JS Сценарий:http://jsfiddle.net/cJZ6y/

0

Вы можете использовать .data()

var value = $('.input-group :checked').data('value'); 
//Gets the checked radio data value 
0

Использование value вместо data-value

var selected = $("input[type='radio'][name='OptVacantOrOccupied']:checked"); 
    if (selected.length > 0) 
     selectedVal = selected.val(); 
2

использование .. data() в JQuery, чтобы получить данные значения атрибута и this.id, чтобы получить идентификатор

с помощью события нажатия

$('input[name="OptVacantOrOccupied"]').click(function(){ 
    alert("id = " + this.id) //alert id 
    alert($(this).data('value')); //alert data-value 
}) 

это даст вам предупреждение, когда любой из радио щелкают

ну да, как и другие, если вам нужны данные и значение проверенных радиостанций, то вы можете использовать :checked

$('input[name="OptVacantOrOccupied"]:checked').data('value'); //alert data-value 
$('input[name="OptVacantOrOccupied"]:checked').attr('id'); //alert data-value 
Смежные вопросы