0

迅速な対応ありがとうございます。これらのラジオボタンをすべてチェックしたい

<input type=radio name=aid value=".$row->aid."id=".$row->id.">  
<input type=radio name=qid value=".$row->qid." id=".$row->id.">
<input type=radio name=id value=".$row->id." id=".$row->id.">
<input type=radio name=id2 value=".$row->id2." id=".$row->id.">

この画像をクリック

<img id=".$row->id1." src=images/btn.png width=50 height=50 
 onclick=RadioClicked('".$row->id."','aid','MyFormID') style=cursor:pointer;>
</input></input></input></input>

助けてくれて本当にありがとう。注：ラジオボタンインターフェイスに画像を使用し、ラジオボタンの可視性を非表示にします。

Javascript コードは次のとおりです。

<script type="text/javascript">
var RadioCheckedImage = new Image();
var RadioUncheckedImage = new Image();

RadioCheckedImage.src = "images/btn1.png";
RadioUncheckedImage.src = "images/btn.png";

function RadioClicked(radioid,radiosetname,formid) {

var form = document.getElementById(formid);
for( var i = 0; i < form.length; i++ ) {
   if(form[i].name == radiosetname) {
      document.getElementById(form[i].id).checked = false;
      document.getElementById("Image"+form[i].id).src = RadioUncheckedImage.src;
      }
      }
document.getElementById(radioid).checked = true;
document.getElementById("Image"+radioid).src = RadioCheckedImage.src;          

return false;
}
</script>

PHPコードは次のとおりです。

これらのコードは問題ありませんでした。画像をクリックすると、このラジオ ボタンを確認できます。 

'while ($row = mysql_fetch_object($result)) {
echo "<table><tr><td>   

<input type=radio name=aid value=".$row->aid." id=".$row->id." checked>

<img id=".$row->id1." src=images/btn.png width=50 height=50 
onclick=RadioClicked('".$row->id."','aid','MyFormID') style=cursor:pointer;>
</input></td>'

しかし、別のラジオボタン（下）を追加する必要があり、上の画像をクリックして確認する必要があります

<input type=radio name=id value=".$row->id." id=".$row->id.">id</input>
<input type=radio name=qid value=".$row->qid." id=".$row->id.">qid</input>
<input type=radio name=id2 value=".$row->id2." id=".$row->id.">id2</input>

    } }

ここに私が欲しいスクリーンショットがあります。プッシュボタンの画像をクリックして、4つのラジオボタンをチェックしたいです。注: このスクリーン ショットでは、3 つのラジオ ボタンを手動でクリックする必要がありました。

うわープッシュ画像

うわープッシュ画像

        • 画像をプッシュ

うわープッシュ画像

うわープッシュ画像

-送信ボタン-

4

2 に答える 2

0

これは、画像がクリックされたときにすべてのラジオボタンを選択する例です。

JSFiddle

JS

window.onload = function(){
    document.getElementById('testImg').onclick = function(){
        var radios = document.getElementsByClassName('rdo');
        for(var i = 0; i < radios.length; i++){
            radios[i].checked = true;    
        }
    }
}; ​​

HTML

<input class='rdo' type="radio" id='rdo1' /><label for="rdo1">Radio 1</label>
<input class='rdo' type="radio" id='rdo2' /><label for="rdo2">Radio 2</label>
<input class='rdo' type="radio" id='rdo3' /><label for="rdo3">Radio 3</label>

<img id='testImg' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ8Zwmk3K2Nu0ZpxvE0SrQOOKno_ssbEsdX7MuA_HRP0AovfpN06g" />
于 2012-12-20T14:59:25.313 に答える
0

いくつかのラジオ ボタンだけがクリックされるようにするため、次のように、それらとそれぞれの画像を div に配置することをお勧めします。

$(document).ready(function (){
    $('.image').click(function (){
        $(this).parent('div').children('input[type=radio]').click();
    });​
});

次の HTML を使用します。

<div id="radioButtonsDiv1">
    <input type=radio name="id" value="1" id="1">id</input>
    <input type=radio name="qid" value="1" id="2">qid</input>
    <input type=radio name="id2" value="1" id="3">id2</input>
    <button class="image">This is a CLICK image</button>
</div>

<div id="radioButtonsDiv2">
    <input type=radio name="id" value="2" id="4">id</input>
    <input type=radio name="qid" value="2" id="5">qid</input>
    <input type=radio name="id2" value="2" id="6">id2</input>
    <button class="image">This is a CLICK image</button>
</div>​

そして、これが関連するjsFiddleです。

于 2012-12-21T13:26:04.783 に答える