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 に答える