Получить текст метки, принадлежащий проверенному переключателю

Я пытаюсь получить text ярлыков, принадлежащих к переключателям checked, но, похоже, не в состоянии это сделать.

$(document).ready(function(){
  $("body").on("click", "#btn", function(){

    var radios = $("input[type='radio']");

    $.each(radios, function(index, element){
      if ($(this).prop("checked") === true){

        var radioID = element.id;
        $("label").each(function(ind, elm){

          if ($(elm).prop("for") == radioID){
            console.log($(elm)); 
          }

        });
      }
    });
  });
});

jsbin

По какой-либо причине, которая просто распечатывает

-     [11: 07: 13.834] ({0: ({}), контекст: ({}), длина: 1}) @http://jsbin.com/uniwum/2/edit:71

в консоли. Что я сделал неправильно?

Ответы

Ответ 1

Сделайте так: -

$('#btn').click(function() {
    $("input[type='radio']:checked").each(function() {
        var idVal = $(this).attr("id");
        alert($("label[for='"+idVal+"']").text());
    });
});

Обратитесь LIVE DEMO

ОБНОВЛЕНО:

Ниже приведены ссылки на документацию: -

Ответ 2

Попробуйте следующее:

$('#btn').click(function(){
    $('table input[type="radio"]').each(function(){
        if($(this).is(':checked')){
        console.log($(this).parent().next().find('label').text());
        }
    });
});

Пример jsFiddle

Обновление. Поскольку они являются переключателями, еще более быстрый способ:

$('#btn').click(function(){
    console.log( $('table input[type="radio"]:checked').parent().next().find('label').text() );
});

Пример jsFiddle

Ответ 3

Вам нужно вызвать функцию .text(), чтобы получить текст элемента после его выбора, например: $(elm).text().

В этом случае, поскольку elm уже является DOM node, вы можете вызвать plain elm.innerHTML для того же результата.

Ответ 4

Попробуйте этот код:

$("td",$(":checked").parent().parent()).text()

Ссылка для jsFiddle http://jsfiddle.net/rQX7H/2/

Ответ 5

Вы можете сделать это во многом в зависимости от HTML, написанного для переключателя и текста для переключателя, я вижу 2 способа, которые можно сделать с минимальными усилиями.

Метод 1: Назначьте настраиваемые атрибуты данных для переключателя с тем же текстом, который должен отображаться.

    <input id="radio4" name="radios1" type="radio" value="4" data-value="radio 4" /> radio 4
    <input id="radio5" name="radios1" type="radio" value="4" data-value="radio 5"/> radio 5
    <input id="radio6" name="radios1" type="radio" value="4" data-value="radio 6"/> radio 6
    <input type="button" id="btn" value="Get from data-value" />

Подробнее о пользовательских атрибутах данных: Пользовательские данные - * Атрибуты

Script для получения текста:

$(document).on("click", "#btn", function () {
            var value = $("input[name=radios1]:checked").attr("data-value");
            alert(value);
        });

Метод 2: Преобразуйте html для переключателей, чтобы назначить одно и то же свойство [name] для всех из них, затем поместите поля "label" для переключателей, как показано ниже

<input id="radio1" name="radios" type="radio"/>
        <label for="radio1"> radio 1</label>
    <input id="radio2" name="radios" type="radio"/>
        <label for="radio2"> radio 2</label>
    <input id="radio3" name="radios" type="radio"/>
        <label for="radio3"> radio 3</label>
    <input type="button" id="btn1" value="Get from Label" />

Script для получения текста:

$(document).on("click", "#btn1", function () {
        var idVal = $('input[name=radios]:checked').attr("id");
        $("label[for='"+idVal+"']").text();
        //If you have the radio button in HTML table structure write it as below
        $('input[name=radios]:checked').parent().find('label').text();
    }

Надеюсь, что это поможет:)

Ответ 6

$("input[type='radio']:checked").parent().text()