单选按钮高亮

这里是我当前的代码：单选按钮高亮

<label> 
    <input type="radio" id="nosupp" name="nosupp"> 
    No Supplier Chosen 
</label><br/><br/> 

<cfloop query="supplier"> 
    <label> 
    <input type="radio" id="chk1" name="chooseSupp" onchange="change(this);"> 
     Chosen Supplier 
    </label> 
</cfloop>

的Javascript：

<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'; 
    } 
</script>

这样做是什么，突显每每当他们点击了循环单选按钮。

我的问题是，当我点击循环外的单选按钮（nosupp）时，循环中检查的最后一个高亮显示没有消失。

我不想在nosupp上或者当nosupp被选中时突出显示。

任何想法？

来源

2013-02-21 Alias

做这样的（我假设你nosupp和人联党是在同一个父表或者修改这个代码，根据您的需要）：

<input type="radio" id="nosupp" name="nosupp" onchange="resetSupp(this);"> 

<script type="text/javascript"> 
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>

来源

2013-02-21 11:31:39 gaurav

的问题是，你要选择的基础上当你只需要选择一些时，键入“输入”。我所做的只是将class="chooseSupp"添加到循环内的输入中，并将您的javascript中的选择器更改为var inputs = tbl.getElementsByClassName("chooseSupp");。试试看，让我知道它是怎么回事。

<label> 
    <input type="radio" id="nosupp" name="nosupp"> 
    No Supplier Chosen 
</label><br/><br/> 

<cfloop query="supplier"> 
    <label> 
    <input type="radio" id="chk1" name="chooseSupp" class="chooseSupp" onchange="change(this);"> 
     Chosen Supplier 
    </label> 
</cfloop> 


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

来源

2013-02-21 11:32:54 Chris

感谢您的回答，但这并未阻止循环中的单选按钮被突出显示。 – Alias 2013-02-21 11:38:48

您是否将该类添加到每个输入或循环内部的类？命令'getElementsByClassName'应该只选择具有该类的元素。 – Chris 2013-02-21 11:43:42

只是在循环中的人。 – Alias 2013-02-21 13:28:02

你必须为每个那组的一部分输入相同的名称，所以更改：

<input type="radio" id="nosupp" name="nosupp">

到

<input type="radio" id="nosupp" name="chooseSupp">

来源

2013-02-21 11:34:00 starshine531

给ID为所有输入元素面板

.setTransparent{background:transparent} 

    if($(input[name==chooseSupp] :checked)) 
    $("#panel :input").addClass(setTransparent); 

    // write other conditions 
    $("#panel :input").removeClass(setTransparent);

来源

2013-02-21 11:34:03 sasi

<div id="div_myradgroup"> 
    <label> 
     <input type="radio" id="nosupp" name="chooseSupp" onchange="change(this, true);">No Supplier Chosen 
    </label> 
    <label> 
     <input type="radio" id="chk1" name="chooseSupp" onchange="change(this);">Chosen Supplier 
    </label> 
    <label> 
     <input type="radio" id="chk2" name="chooseSupp" onchange="change(this);">Chosen Supplier 
    </label> 
</div> 

<script type="text/javascript"> 

    var group = document.getElementById('div_myradgroup'); 
    if (!group) { 
     // you decide what should happen if you're expecting it to be in the dom 
    } 

    function change(obj, nohlight) { 
     var label = obj.parentNode, 
      inputs = group.getElementsByTagName("input"), 
      inp = null; // a single input assigned to in loop 

     for (var i = 0; i < inputs.length; i++) { 
      inp = inputs[i]; 
      if (inp.getAttribute('type') === 'radio') { 
       inp.parentNode.style.backgroundColor = 'transparent'; 
      } 
     } 

     if (!nohlight) { 
      label.style.backgroundColor = (obj.checked) ? 'red' : 'transparent'; 
     } 
    } 

</script>

来源

2013-02-21 11:50:02

单选按钮高亮

回答

相关问题