我在页面顶部有一个单选按钮来显示“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”的按钮在页面加载时突出显示?
最佳答案
您已经编写了函数,但听起来好像您从未在页面加载后调用它来初始化所有内容。
为了遵循最佳实践,您希望在 body.onload
完成时调用 change(obj)
。 this question的答案复习一些不同的方法来做到这一点。
最简单/最可靠的 (imo) 是使用 jQuery,但您似乎没有使用它。下一个最佳(同样,imo)是使用 document.onload=function
声明。
除非您只需要初始化一个输入,否则您可能想要编写另一个函数,它实际上循环遍历每个输入并调用 change(obj)
。然后,当 body.onload
触发时,您将调用新的 init()
函数。
所以,你会有
document.onload=init
和
function init(){
// loop through all your inputs
// call change(obj) on each one
}
编辑 我刚刚重新阅读了您的 changeObj 并注意到您正在传递一个元素并使用 parentNode 备份 DOM 树,因此您已经在遍历每个输入,所以我的伪代码for init
会有点偏离现状。不过,我可能会使用 getElementsByName 并传入输入组的名称,这样您就不会在每次调用 change(obj)
时都重置每个输入。
关于javascript - 在页面加载时突出显示单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15246936/