Javascript-форум - Изменение radio\li ползунком

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Изменение radio\li ползунком (https://javascript.ru/forum/dom-window/45869-izmenenie-radio%5Cli-polzunkom.html)

Возник еще один вопрос. Добавляю в код $( "#rangevalue" ).html( ui.value );
в <output id="rangevalue"></output> все работает, но нужно сделать так чтобы выводилась не числовая последовательность, а опции этих radio (<input type="radio" value="Опция_1">), есть идеи на счет этого?

Цитата:

Сообщение от рони

$(this).prop({checked : indx == ui.value})

Не проще ли rd.eq(ui.value).prop('checked', true) ?

Цитата:

Сообщение от danik.js

Не проще ли rd.eq(ui.value).prop('checked', true) ?

name небыло указано а без одинакового name это несработает

cript,

$( "#rangevalue" ).html(rd.eq(ui.value).val());

рони,
Снова выручил, огромное спасибо!

Цитата:

Сообщение от рони

Сообщение от danik.js
Не проще ли rd.eq(ui.value).prop('checked', true) ?
name небыло указано а без одинакового name это несработает

А так если name указан то чем этот способ лучше?

Цитата:

Сообщение от cript

чем этот способ лучше?

ненужен перебор инпутов - 9 пост, строки 34 -36

Появился новый вопрос по этой теме.
Ставлю событие onclick на радио кнопку,
При клике мышкой событие срабатывает, а при наведении ползунком нет..

cript,
код покажите

Цитата:

Сообщение от рони

код покажите

Радио кнопка:

<input type="radio" class="radio" name="button" value="<?=$value;?>" onclick="action('2500')">

Слайдер:

<div id="slider-vertical" style="height:200px;"></div>
<script>
var rd = $('.output input:radio');
$("#slider-vertical").slider({
animate: true,
orientation: "vertical",
range: "min",
min: 0,
max: 5,
value: 0,
slide: function(event, ui) {
$("#rangevalue").html(rd.eq(ui.value).val());

rd.each(function(indx, element){  // первый вариант
$(this).prop({checked : indx == ui.value})
});
rd.eq(ui.value).prop('checked', true) // второй вариант

}
});
$("#rangevalue").val( $("#slider-vertical").slider("value"));
</script>
<label for="rangevalue">Value:</label>
<div id="rangevalue" style="border:0; color:#f6931f; font-weight:bold;"></div>

onclick пробовал заменять на onchange onselect onsubmit..

cript, всё работает

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">
  <title>slider demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css">
  <style>
  div {
      margin-top: 20px;
  }

  .slider {width : 500px; }
   	</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
$(function ()
{
   var rd = $('.output input:radio');
$("#slider-vertical").slider({
animate: true,
orientation: "vertical",
range: "min",
min: 0,
max: 5,
value: 0,
slide: function(event, ui) {
$("#rangevalue").html(rd.eq(ui.value).val());

rd.eq(ui.value).prop('checked', true) // второй вариант

}
});
$("#rangevalue").html( $("#slider-vertical").slider("value"));
})
function action(str)
{
   alert(str);
}
</script>
</head>

<body>
<div class="output">
<input type="radio" class="radio" name="button" value="1" onclick="action('2500')" checked="checked">
 <input type="radio" class="radio" name="button" value="2" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="3" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="4" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="5" onclick="action('2500')">
 <input type="radio" class="radio" name="button" value="6" onclick="action('2500')">
 </div>

<label for="rangevalue">Value:</label>
<div id="rangevalue" style="border:0; color:#f6931f; font-weight:bold;"></div>
<div id="slider-vertical" style="height:200px;"></div>


</body>
</html>