Question

我正在使用图像替换单选按钮，隐藏按钮并根据点击的图像选择它们。

单击图像时，我希望它们选择一个单选按钮，然后提交。

这是我的原始代码：

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true);
});

如果我点击图片然后提交，则此方法有效。

我将其扩展为点击提交表单：

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true);
  $("#settings").submit();
});

在这种情况下，表单提交但不会更改值。如果我通过单击按钮提交它，它可以正常工作。

我哪里出错？

Answer 1

此处的问题是true属性的checked值。

Chrome中的jsfiddle提供了工作。但它在Firefox中不。要使其在Firefox中运行，请使用checked属性的checked值。

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', 'checked');
});

另一种方法是直接操纵（以及）DOM元素的checked属性：

$(this).parent().find(":radio").get(0).checked = true;

Answer 2

Javascript是异步的。在jQuery可以检查复选框之前，看起来表单正在提交。尝试将提交置于回调中：

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true).one('change', function(){
     $("#settings").submit();
  });
});

Answer 3

也许不是最好的答案，但如果你给你的图像一个类，你可以替换：#settings img with .image然后它可以工作

Answer 4

我已经解决了你的问题：http://jsfiddle.net/fC38V/并做了一些补充：

$('#settings').submit(function(){
    alert($(this).serialize());
});

$('#settings img').click(function() {
    $(this).parent().find(":radio").attr('checked', true);
    $("#settings").submit(); // submits form on click
});

通过在点击处理程序之前添加提交处理程序并测试分叉小提琴，我只能在浏览器中验证它是否按预期工作（据我所知，在描述中）（Mac OS X上的Safari 6.0.1） 10.8）。

请确保：

没有nester形式。浏览器可以对此非常挑剔。
只有一个元素的ID为“#settings”

我能提出的另一个可能的问题是你的浏览器......你在用什么？

jQuery submit（）;没有捡到价值

4 个答案: