0

我通过隐藏按钮并根据单击的图像选择它们来使用单选按钮的图像替换。

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

这是我的原始代码：

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

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

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

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

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

我哪里出错了？

4

4 回答 4

1

这里的问题是true赋予checked属性的值。

提供的jsfiddle在 Chrome 中工作。但它不在Firefox 中。要使其在 Firefox 中也能正常工作，请使用该属性的checked值。checked

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

另一种方法是直接操作（以及）checkedDOM 元素的属性：

$(this).parent().find(":radio").get(0).checked = true;
于 2013-05-17T14:18:31.790 回答
-1

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

$('#settings img').click(function() {
  $(this).parent().find(":radio").attr('checked', true).one('change', function(){
     $("#settings").submit();
  });
});
于 2012-10-23T13:45:44.787 回答
-1

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

于 2012-10-23T13:56:47.577 回答
-2

我已经分叉了你的问题：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 10.8 上的 Safari 6.0.1）中验证它是否按预期工作（据我所知）。

请确保：

  1. 没有嵌套表格。浏览器对此非常挑剔。
  2. 只有一个 ID 为“#settings”的元素

我能想到的唯一其他可能的问题是你的浏览器......你在用什么？

于 2012-10-23T13:44:25.317 回答