У меня есть список радиоблоков с одинаковым идентификатором. Я пытаюсь прочитать значение каждого переключателя, но мой код всегда читает значение только первого радиоблока.
<script src="/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#rdodoc").click(function () {
var val = $("[id=rdodoc]").val()
alert(val);
});
});
</script>
@foreach (ReadWord.Models.Document item in ViewBag.lstdocs)
{
@Html.RadioButton("rdodoc", item.Name)
<label>@item.Name</label>
}
вместо id
используйте class="rdodoc"
, это правильный способ сделать это.
$(document).ready(function () {
$(".rdodoc").click(function () {
var val = $(this).val()
alert(val);
});
});
с приведенным выше кодом, когда вы нажмете на переключатель, это значение будет предупреждено
Идентификаторы элементов должны быть уникальными. Повторяющиеся идентификаторы сделают ваш html-документ недействительным, и доступ к этим элементам по идентификатору вернет только первый найденный элемент. Если вы хотите сгруппировать радиокнопки, используйте для этого атрибут name. И чтобы получить значения, вы можете повторить их уникальные идентификаторы.
Вам также нужно запустить цикл в javascript. Прямо сейчас вы просто получаете только 1 значение, поэтому вы видите первый. и измените идентификатор на имя или класс.
$( ".rdodc" ).each(function( index ) {
alert( index + ": " + $( this ).val() );
});
это будет предупреждать о каждом значении переключателя.
Недопустимо, чтобы html имел множество элементов с одним и тем же идентификатором. Кроме того, ваш селектор привяжет событие click к одному элементу. Вместо этого используйте класс следующим образом:
<script>
$(document).ready(function () {
$(".rdodoc").click(function () {
var values = $('.rdodoc').map(function(e) { return $(this).val(); });
$.each(values, function(e, v) { alert(v); });
});
});
</script>
@foreach (ReadWord.Models.Document item in ViewBag.lstdocs)
{
@Html.RadioButton("rdodoc", item.Name, new { @class = "rdodoc" })
<label>@item.Name</label>
}