Home/ Questions/Q 3616690
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T22:31:47+00:00

<!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> <meta http-equiv=Content-Type content=text/html;

  • 0
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>click div to select hidden options</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<style type="text/css">
.clickDiv {
 width:50px;
 height:50px;
 cursor:crosshair;
}
.red {border:1px #000 solid;}
.green {border:1px #000 solid;}
.redBG {background:#F00;}
.greenBG {background:#0F0;}
</style>
<script type="text/javascript">
$(function() {
    $('div.clickDiv.red').click(function(){
  var secilenMadde=$(this).attr('madde');
  $('div#write').text(secilenMadde);
        $('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked');
  $('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG');
  $('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG');
    });
    $('div.clickDiv.green').click(function(){
  var secilenMadde=$(this).attr('madde');
  $('div#write').text(secilenMadde);
        $('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked');
  $('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG');
  $('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG');
    });

});

</script>
</head>

<body>
<div id="write"></div>
<form id="formId" name="formName" method="post">
  <table>
    <tr>
      <td><div class="clickDiv red" madde="line1"></div></td>
      <td><div class="clickDiv green" madde="line1"></div></td>
    </tr>
    <tr>
      <td><div class="clickDiv red" madde="line2"></div></td>
      <td><div class="clickDiv green" madde="line2"></div></td>
    </tr>
  </table>
  <label for="line1red"><input id="line1red" type="radio" name="line1" value="red" /> Red</label>
  <label for="line1green"><input id="line1green" type="radio" name="line1" value="green" /> Green</label><br />

  <label for="line2red"><input type="radio" name="line2" value="red" /> Red</label>
  <label for="line2green"><input type="radio" name="line2" value="green" /> Green</label>

</form>
</body>
</html>

This works.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>click div to select hidden options</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<style type="text/css">
.clickDiv {
 width:50px;
 height:50px;
 cursor:crosshair;
}
.red {border:1px #000 solid;}
.green {border:1px #000 solid;}
.redBG {background:#F00;}
.greenBG {background:#0F0;}
</style>
<script type="text/javascript">
$(function() {
    $('div.clickDiv.red').click(function(){
  var secilenMadde=$(this).attr('madde');
  $('div#write').text(secilenMadde);
        $('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked');
  $('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG');
  $('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG');
    });
    $('div.clickDiv.green').click(function(){
  var secilenMadde=$(this).attr('madde');
  $('div#write').text(secilenMadde);
        $('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked');
  $('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG');
  $('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG');
    });

});

</script>
</head>

<body>
<div id="write"></div>
<form id="formId" name="formName" method="post">
  <table>
    <tr>
      <td><div class="clickDiv red" madde="line[1]"></div></td>
      <td><div class="clickDiv green" madde="line[1]"></div></td>
    </tr>
    <tr>
      <td><div class="clickDiv red" madde="line[2]"></div></td>
      <td><div class="clickDiv green" madde="line[2]"></div></td>
    </tr>
  </table>
  <label for="line1red"><input id="line1red" type="radio" name="line[1]" value="red" /> Red</label>
  <label for="line1green"><input id="line1green" type="radio" name="line[1]" value="green" /> Green</label><br />

  <label for="line2red"><input type="radio" name="line[2]" value="red" /> Red</label>
  <label for="line2green"><input type="radio" name="line[2]" value="green" /> Green</label>

</form>
</body>
</html>

This doesn’t.

I need input names as an array but it breaks my script. Why?
The propose of the script is selecting radio buttons by clicking divs.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK, I’ve put your two examples on JSFiddle.

    Example 1:

    http://jsfiddle.net/ryKjc/1/

    Example 2:

    http://jsfiddle.net/aN6g9/

    Edit:

    Alright, I finally figured out what you’re doing here. In the first example, your secilenMadde variable is either line1 or line2. In the second one, you’re using HTML’s form arrays and naming the radio button groups line[1] and line[2]. The problem is in your selectors. When you make a selection like this in the second example:

    $('input[name='+secilenMadde+'][value=red]');

    You’re doing this:

    $('input[name=line[1]][value=red]');

    Those brackets throw jQuery’s selector for a loop, so you must wrap it in double quotes like this:

    $('input[name="'+secilenMadde+'"][value=red]');

    Do this for any place you use the input[name] selector in conjunction with inner angle brackets and it should work. Proof here:

    http://jsfiddle.net/aN6g9/1/

    • 0