單選按鈕高亮

這裏是我當前的代碼：單選按鈕高亮

<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

單選按鈕高亮

回答

相關問題