Question

我在页面顶部有一个单选按钮，显示“No Chosen Supplier”，然后在查询循环中显示其他几个单选按钮。

<label>
  <input type="radio" id="nosupp" name="supp" onchange="resetSupp(this);">
  No Supplier Chosen
</label>

<cfloop query="supplier"
  <label>
    <input type="radio" id="chk1" name="supp" value="#supplier.id#" onchange="change(this);" <cfif getChosen.RecordCount>checked="Yes"</cfif>>
    Chosen Supplier
  </label>
</cfloop>

所以我提交了包含这些按钮的表单，并且检查的按钮存储在数据库中。

然后我使用getChosen.RecordCount查询数据库以检查单选按钮值是否为“true”。

我遇到的问题是getChosen.RecordCount选择了正确的单选按钮，但没有我正在使用的红色突出显示。

以下是我突出显示按钮的方法：

<script type="text/javascript">
  function change(obj) {
  var tr=obj.parentNode.parentNode;
  var tbl = tr.parentNode.parentNode;
  var inputs = tbl.getElementsByTagName("input");
  for(var i = 0;i<inputs.length;i++)
  inputs[i].parentNode.parentNode.style.backgroundColor='transparent';
  tr.style.backgroundColor=(obj.checked)? 'red' : 'transparent';
}

function resetSupp(obj) {
  var tr=obj.parentNode.parentNode;
  var tbl = tr.parentNode.parentNode;
  var inputs = tbl.getElementsByTagName("input");
  for(var i = 0;i<inputs.length;i++)
  inputs[i].parentNode.parentNode.style.backgroundColor='transparent';
  tr.style.backgroundColor= 'transparent';
}
</script>

如何在数据库中获取设置为“true”的按钮以在页面加载时突出显示？

Answer 1

你已经编写了你的函数，但听起来好像你在加载页面后从未调用它来初始化所有内容。

要遵循最佳做法，您需要在change(obj)完成时致电body.onload。 this question的答案可以通过一些不同的方式来实现。

最简单/最可靠（imo）是使用jQuery，但似乎并没有使用它。下一个最好的（再次，imo）是使用document.onload=function声明。

除非您只需要初始化一个输入，否则您可能希望编写另一个实际循环遍历每个输入并调用change(obj)的函数。然后，当init()触发时，您将调用新的body.onload功能。

所以，你会有

document.onload=init

和

function init(){
    // loop through all your inputs
    // call change(obj) on each one
}

修改我只是重新读一遍你changeObj，发现你正在传递一个元素和备份使用parentNode DOM树，那么你已经通过每个输入循环，所以我的伪代码对于init而言，它会有点偏离。虽然，我可能会使用getElementsByName并传入输入组的名称，因此每次调用change(obj)时都不会重置每个输入。

在页面加载时突出显示单选按钮

1 个答案: