0

这是我当前的代码：

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

有任何想法吗？

4

5 回答 5

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>
于 2013-02-21T11:31:39.293 回答
0

问题是当您只需要选择一些时，您是根据“输入”类型进行选择的。我所做的只是添加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-21T11:32:54.703 回答
0

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

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

到

<input type="radio" id="nosupp" name="chooseSupp">
于 2013-02-21T11:34:00.203 回答
0

为所有输入元素提供 id 作为面板

    .setTransparent{background:transparent}

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

   // write other conditions
    $("#panel :input").removeClass(setTransparent);
于 2013-02-21T11:34:03.213 回答
0 
<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-21T11:50:02.513 回答