javascript - 为什么 JavaScript 结果总是返回第一个值？

Question

这是我的问题。我目前正在尝试使用某些模块自定义 joomla 文章内容。当我尝试在用户单击输入之前隐藏一些 div 时。假设用户单击 Test1，这是一个单选按钮，然后我用 div 隐藏的另一个字段将显示 Test1 的内容。所有详细信息均从 mysql 数据库加载。

这是我试图显示该值的 JavaScript 代码。但它总是显示第一个值，尽管我单击其他值如 Test2 或 Test3 一样糟糕。

示例:

<script type="text/javascript">
        function showBox1(){
            document.getElementById('hideBox1').style.display ="";

var test = document.getElementById('123').value;

confirm (test);
</script>

这是我的 php 代码:

<?php

// Get default database object
$db =JFactory::getDBO();

// Get a new JDatabaseQuery object
$query = $db->getQuery(true);

// Build the query
$query->select($db->quoteName('campusid'));
$query->from($db->quoteName('campus'));
$query->where($db->quoteName('collegeid').'='. $db->quote('1'));

// Set the query for the DB oject to execute
$db->setQuery($query);
// Get the DB object to load the results as a list of objects
$results = $db->loadObjectList();
if($results){
     foreach($results as $result)
     {
        echo "<label class='option block spacer-t10'>";
         echo "<input type='radio' name='$result->campusid' id='123' value='$result->campusid' onClick='return showBox1()'><span class='radio'></span>";
 echo $result->campusid;
 echo '</label>';
 } 

}
else{ echo 'Error';}
?>

作为示例，第一个 div 的输出是 3 个单选按钮，每个单选按钮都有自己的值。当用户单击任一单选按钮时，它应该传递要显示的正确值，以便我可以将该值带到下一个 div 以选择我的数据库数据。尽管我单击其他单选按钮，但我在代码中是否犯了任何错误，使我始终获得第一个值？

Answer 1

每个单选按钮本身就是一个元素。单选组不是单个元素。

每个单选按钮都有相同的 ID，这在 HTML 中无效且不允许。

当您getElementById时，浏览器会尝试执行错误恢复并获取具有该 id 的第一个元素(忽略其他元素)。

如果你想处理一组元素，那么:

1. 让他们成为一个类的成员
2. getElementsByClassName
3. 循环结果并测试 checked 属性
4. 当您找到真正的已检查时，获取该元素的值