Question

这是我目前的代码：

<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。

有什么想法吗？

Answer 1

这样做（我假设你的nosupp和supp在同一个父表中，或者根据你的需要修改这段代码）：

<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>

Answer 2

问题在于，当您只需选择一些时，您将根据类型“输入”进行选择。我所做的就是将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>

Answer 3

对于属于该组的每个输入，您必须具有相同的名称，因此请更改：

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

到

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

Answer 4

将所有输入元素的id作为面板

    .setTransparent{background:transparent}

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

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

Answer 5

<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>

单选按钮突出显示

5 个答案: