获取数据属性值答案

【问题标题】：Get data attribute value获取数据属性值
【发布时间】：2015-09-19 09:31:17
【问题描述】：

我正在使用下面的代码来获取数据属性值。但无论我选择什么，我都只得到 foreach 循环的第一个值。

foreach($values as $opvalue){
            ?>
            <?php  echo $opvalue->getTitle(); ?>
            <?php echo $opvalue->getId(); ?>
            <input type="radio" data-sareeid="<?php echo $opvalue->getId(); ?>" id ="sareefinishing" name="sareefinishing" value="<?php echo $opvalue->getTitle(); ?>" />

        <?php
        }

JavaScript 代码：

var sareeOption = document.getElementById('sareefinishing');
    alert(sareeOption.dataset.sareeid);

从下图中，它总是提醒 61818。相关问题here

【问题讨论】：

可以粘贴渲染后的html吗？

标签： javascript jquery

【解决方案1】：

Id 在您的代码中应该是唯一的，否则它将始终选择第一个。所以你需要使用类。你被标记为 jQuery，所以使用 data()

做这样的事情

var sareeOption = $('.sareefinishing:checked');
alert(sareeOption.data('sareeid'));

【讨论】：

【解决方案2】：

fiddle

$("input[name=qwe]").change(function(){
if($(this).is(':checked')){
    alert($(this).val())
}
})

您可以这样做，使用名称然后更改单选按钮获取值然后提醒它

【讨论】：

【解决方案3】：

在任何给定文档中都不能有重复的 ID。因此，使用类。这是一个纯 JavaScript 解决方案。

var radios = document.querySelectorAll('.sareefinishing');
[].forEach.call(radios, function(radio) {
  radio.addEventListener("change", function() {
      alert (this.dataset.sareeid);
  }, false);
});

<input type="radio" class="sareefinishing" data-sareeid="10" name="sareefinishing" value="10" />
<input type="radio" class="sareefinishing" data-sareeid="20" name="sareefinishing" value="20" />
<input type="radio" class="sareefinishing" data-sareeid="30" name="sareefinishing" value="30" />
<input type="radio" class="sareefinishing" data-sareeid="40" name="sareefinishing" value="40" />

Another demo 在单击按钮时显示所选单选按钮的sareeid。

【讨论】：