checkbox is too small (up to 50 tables)

<form>
<table>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

<table>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

<table>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

</form>

Open in new window



note: there are up to 50 tables using a php foreach loop

tried adding
<label>

want a large area
ideally the each <table></table>
where user clicks and checkbox gets clicked

you can add ids and classes
LVL 1
rgb192Asked:
Who is Participating?
 
dimmergeekCommented:
Your request is vague at best, but the following provides for LARGE checkboxes and the ability to track the status of JavaScript elements for each row as needed when an img is clicked and status is changed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>BIG CHECKS</title>
    <style type="text/css">
        tr
        {
            width:400px;
        }
    </style>
    <script type="text/javascript" language="javascript">
        var checks = new Array();
        for (var x = 0; x < 5; x++) {
            checks[x] = 0;
        }
        
        function swapImg(el)
        {
            if (checks[el] == 0 || checks[el] == undefined) {
                document.getElementById('row' + el).src = "checked.png";
                checks[el] = 1;
            }
            else {
                document.getElementById('row' + el).src = "notChecked.png";
                checks[el] = 0;
            }
            document.getElementById('results').innerHTML = checks[0] + " " + checks[1] + " " + checks[2] + " " + checks[3] + " " + checks[4];
        }
    </script>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>
                    <img id="row0" src="notChecked.png" alt="" onclick="javascript:swapImg(0);" />
                </td>
            </tr>
            <tr>
                <td>
                    <img id="row1" src="notChecked.png" alt="" onclick="javascript:swapImg(1);" />
                </td>
            </tr>
            <tr>
                <td>
                    <img id="row2" src="notChecked.png" alt="" onclick="javascript:swapImg(2);" />
                </td>
            </tr>
            <tr>
                <td>
                    <img id="row3" src="notChecked.png" alt="" onclick="javascript:swapImg(3);" />
                </td>
            </tr>
            <tr>
                <td>
                    <img id="row4" src="notChecked.png" alt="" onclick="javascript:swapImg(4);" />
                </td>
            </tr>
        </table>
    </form>    
    <br /><br /><br />
    <center>
        <p style="border:solid 3px #A9A9A9;padding:5px 5px 5px 5px;width:75px;height:20px;" id="results"></p>
    </center>
    <script type="text/javascript">
        document.getElementById('results').innerHTML = checks[0] + " " + checks[1] + " " + checks[2] + " " + checks[3] + " " + checks[4];
    </script>
</body>
</html>

Open in new window

notChecked.png
Checked.png
0
 
Chris StanyonCommented:
Checkboxes are checkboxes - you can't resize them!

Tell us what you're after and we might be able to help. Your code doesn't really make any sense.
0
 
rgb192Author Commented:
thanks
for large checkbox
0
 
dimmergeekCommented:
You're very welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.