jQuery: обновлять теги span по классу, когда выбран определенный переключатель? - PullRequest
Новая
       11

jQuery: обновлять теги span по классу, когда выбран определенный переключатель?

0 голосов
/ 16 января 2012

Как я могу обновить тег class = "able", когда выбран определенный переключатель?

Шаги: Страница открывает диапазон классов в состоянии очищается. Всякий раз, когда выбраны радио1, радио2 или радио3: Если выбрано radio1, span class = "able" обновляется значением ввода host1. Если выбрано radio2, span class = "able" обновляется значением ввода host2. Если выбрано radio3, span class = "able" обновляется значением ввода host3.

Заранее спасибо! 

    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>jQuery Update span by radio button selection</title>
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script src="js/jquery-1.6.2.min.js"></script>
    <script src="ui/jquery.ui.core.js"></script>
    <script src="ui/jquery.ui.datepicker.js"></script>
    <script>

    </script>
    </head>
    <body>

    <div>
    <input type="text" id="host1" value="Able">
    <input type="text" id="host2" value="Baker">
    <input type="text" id="host3" value="Charlie"><br>

    <label><input type="radio" name="radiogroup" value="yes" id="radio1" />Yes</label>
    <label><input type="radio" name="radiogroup" value="no"  id="radio2" />No</label>
    <label><input type="radio" name="radiogroup" value="maybe" id="radio3" />Maybe</label>
    <br>

    </div>

    <span id="result1" class="able"> </span><br>
    <span id="result2" class="able"> </span><br>
    <span id="result3" class="able"> </span>


    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 16 января 2012

Попробуйте это 

$('input:radio').click(function(){

    var id = this.id.replace('radio', '');
    $('#result' + id).text($('#host' + id).val()); 

});

Рабочая Демо

0 голосов
/ 16 января 2012

Вы, вероятно, захотите добавить события щелчков к вашим радио-кнопкам, которые при клике изменят значение интервалов.

Что-то вроде: 

$('#radio1').click(function(){$('span.able').html($('#host1').val());});

Вы также можете сделать этоболее распространенное: 

$('input:radio').live('click',function(){
  var jThis = $(this), jText = $('#'+jThis.attr('text_id'));
  $('span.able').html(jText.val());
});

Вам необходимо добавить атрибут «text_id» к переключателю, чтобы определить, какой текст следует использовать для данного переключателя.

...