Question

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

这是我试图显示价值的javascript代码。但它总是显示我的第一个值，虽然我点击其他值suck作为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的第一个元素（忽略其他元素）。

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

让他们成为班级成员
getElementsByClassName
循环结果并测试checked属性
当您找到真实的checked时，元素

Answer 2

您的radiobuttons具有相同的id 123.您正在使用此ID从DOM中选择元素。确保每个单选按钮都有唯一的ID。

如果将元素传递给函数，您甚至不需要Id。

<强> HTML：

onClick='return showBox1(this)'

<强>的JavaScript

function showBox1(element){
    confirm (element.value);
}

Answer 3

首先，所有单选按钮都具有相同的id属性：“123”。

document.getElementById（）函数期望某个id仅在页面上出现一次。

如果要获取ID为“123”的元素的选定值，则应选择如下：

var test = document.querySelector("#123:checked")[0].value;

如果这不起作用，请尝试：

var test = document.querySelector("[id=\"123\"]:checked")[0].value;

为什么JavaScript结果始终返回第一个值？

3 个答案: