Question

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

这很有效。

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

这不是。

我需要输入名称作为数组，但它会破坏我的脚本。为什么？该脚本的建议是通过单击div来选择单选按钮。

Answer 1

好的，我把你的两个例子放在JSFiddle上。

示例1 ：

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

示例2 ：

http://jsfiddle.net/aN6g9/

修改：

好吧，我终于弄清楚你在这里做了什么。在第一个示例中，您的secilenMadde变量为line1或line2。在第二个中，您使用HTML的表单数组并命名单选按钮组line[1]和line[2]。问题在于您的选择器。在第二个示例中进行如下选择时：

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

你这样做：

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

这些括号抛出jQuery的循环选择器，所以你必须用双引号将它包装成这样：

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

对于将input[name]选择器与内角括号结合使用的任何地方，请执行此操作，它应该可以使用。证明：

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

Answer 2

您需要在attribute equals selector中使用引号：

  attribute
      An attribute name.
  value
      An attribute value. Quotes are mandatory.

因此，您需要使用[attribute='value']更新所有选择器。我在这里更新了您的非工作示例：http://jsfiddle.net/andrewwhitaker/PTtFt/

下次，请将您的问题缩小到更具体的代码段，并更具体地说明您的问题。

Answer 3

由于您的名字中包含[和]，因此当您用作选择器时，您需要将该名称包装在"中。

所以试试

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

jQuery，数组表单单选按钮名称问题

3 个答案: