Question

感谢您的快速回复。我想检查所有这些单选按钮

<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个单选按钮。

o o o o推送图像

- - - 推图像

o o o o推送图像

-SEND BUTTON -

Answer 1

这是一个在单击图像时选择所有单选按钮的示例。

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

Answer 2

由于您似乎只想点击几个单选按钮，我建议您将它们和各自的图像放在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。

单击图像以选择多个单选按钮

2 个答案:

JSFiddle