jQuery и радио кнопки

Question

У меня есть стол, полный переключателей. Каждый из них имеет имя и идентификатор, соответствующий номеру 1-24. Я хочу использовать jQuery для динамического отображения этого номера в другом месте на странице.

Например, если бы я нажал кнопку 7-го переключателя, я хочу, чтобы номер 7 отображался в верхней части страницы.

Answer 1

вы можете использовать мой пример в http://jsfiddle.net/jKNr9/

HTML:

<input type="radio" name="group1" id="1" /> 
<input type="radio" name="group1" id="2" /> 
<input type="radio" name="group1" id="3" /> 

<br /> 
<span id="result"></span> 

ЯШ:

$(document).ready(function() { 
    $("input[name=group1]").change(function() { 
     $('#result').html($(this).attr('id')); 
    }); 
}); 

Answer 2

$('input:radio').click(function() { 
    $('#top').text(this.id); 
}); 

Примечание: идентификаторы не должны начинаться с цифры ... считать префиксом буквы или слова или чего-то еще.

Answer 3

звучит, как вы хотите что-то вроде:

$(':radio').click(function(){ 
    var index = $(this).index(':radio') + 1; 
    $('#elementAtTopOfPage').html(index); 
}); 

или

$(':radio').click(function(){ 
    var id = $(this).attr('id'); 
    $('#elementAtTopOfPage').html(id); 
}); 

Answer 4

Следующий код должен быть полностью функциональным, просто убедитесь, что вы включили библиотеку jquery из локальной копии, а не из Google. И добавьте div «showNumber», где вы увидите цифры.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
 

 

<script type="text/javascript">
$(document).ready(function() {
    $("input:radio[name=numberOptions]").click(function() {
        var theNumberSelected = $(this).val();
        // Remove whatever old valueswe have in the container
        $('#showNumber').empty();
        $('#showNumber').append("<h1>" + theNumberSelected + "</h1>");
        
    });
});
</script>
<div id="showNumber"></div>
<p><input type="radio" name="numberOptions" value="1" id="one" class="numbers"> <label for="one">ONE</label></p>
<p><input type="radio" name="numberOptions" value="2" id="two" class="numbers" > <label for="two">TWO</label></p>
 
 

Успехов!