Clicking an image to select multiple radio buttons

Question

Thank You for the quick respond. I want to check all of these radio buttons

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

byClick this image

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

Thanks again i really appreciate for the help. note: I use the image for radio button interface and hide the radio buttons visibility.

Here is the Javascript code:

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

Here is the PHP code:

These code bellow were fine, i can check this radio button by clicking the image.

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

But i need to add another radio button (below) also check as the image above click

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

    } }

Here is a screen shot that i want. i want to check 4 radio buttons as i click the push button image. note:In this screen shot i had to click 3 radio buttons manually.

o o o o push image

- - - PUSH IMAGE

o o o o push image

-SEND BUTTON-

yes that's what i want. anyway i'd edit my question. hope it would be clear. thanks — batman, Dec 21 '12 at 05:23

score 0 · Answer 1 · answered Dec 20 '12 at 14:59

Here's an example that selects all radio buttons when an image is clicked.

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

thanks for the quick reply. but now i need to change the img id with id's that i have in my table since i use the input radio and img in while loop mode. so it will be like img id=".$row->id." but that's not working. or may be that's not even the right code. i think i need to change the js too "document.getElementById('testImg')" into something else like "document.getElementById('.$row->id.')" so that the id can be called from mytable but i just don't know how :). thanks again really appreciate it. — batman, Dec 23 '12 at 03:21

score 0 · Answer 2 · answered Dec 21 '12 at 13:26

0

Since you seem to want only a few radio buttons to be clicked, I suggest you put them and their respective image in a div, like this:

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

With the following 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>

And here is the associated jsFiddle.

answered Dec 21 '12 at 13:26

Jeff Noel

7,500
4
40
66

thanks for the help, but what should i do if i want to use an image instead of a button because i use button already to submit query. i need the image id and radio id called from table since i am using while loop. so the image id will be like id=".$row->id." which consist of 15 different id's. i only use 2 image active and deactive image for 5 radio button while loop trough 15 id's. i use a function on image click already. a function to swap image and check radio button. there's nothing wrong with the answer, i just don't know how to ask. thanks really appreciate it. – batman Dec 23 '12 at 10:58
Just make sure that all of your images IDs which are in your DB all begin with the same thing (eg: id="rbSelectAll_1" ) and use the following answer: http://stackoverflow.com/a/5002991/1451422 `div[id^="rbSelectAll_"]` is supported in CSS3 and in jQuery, it will select all IDs beginning with `rbSelectAll_` PS: I would suggest you to select an answer according to your original question, and message me if you have more issue with the IDs. – Jeff Noel Dec 27 '12 at 13:19

Clicking an image to select multiple radio buttons

2 Answers2

JSFiddle