在不离开页面的情况下改变按钮的颜色

您可以这样做:

// set all buttons to c_off
$('input[type="submit"]').removeClass('c_on').addClass('c_off');
// set the submitted one to c_on
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');

$(function () {
$('form').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: "test_ajax_update_code.php",
        data: $(this).serialize(),
    });
    // set all buttons to c_off
    $('input[type="submit"]').removeClass('c_on').addClass('c_off');
    // set the submitted one to c_on
    $(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');
    e.preventDefault();
    });
});

我发现很难准确理解您的意思，但是使用几个事件和布尔值，您应该能够相当容易地完成这样的事情。

var image_1 = false
if (image_1 === true) {
    //change button styles
}
var element = getElement('div.image') // example
element.addEventListener('click', function () {
    image_1 = true'
}

甚至不涉及任何ajax。例如，您可以在全部为true时提交

希望对您有所帮助

$('input:submit').on('click',function(){
   $('input:submit').removeClass('c_on').addClass('c_off');
   $(this).removeClass('c_off').addClass('c_on');
})

您应该为每个按钮添加一个单击事件，它允许您删除任何.c_on类，并将其应用于被单击的按钮。

$('input[type="submit"]').on('click', function () {
    $(".c_on").removeClass('c_on').addClass('c_off');
    $(this).removeClass('c_off').addClass('c_on');
}}

尝试此解决方案并检查CSS是否适合该类的颜色。

更新:

1. id不能重复。因此，我将forms的id更改为class。
2. 然后我添加了新的data-image属性来区分按钮集。

更新的代码片段:

$(function() {
  $('form').on('click', 'input[type="submit"]', function(e) {
    $.ajax({
      type: 'post',
      url: "test_ajax_update_code.php",
      data: $(this).parent().serialize(),
    });
    var clicked = $(this),
      imageName = clicked.data("image");
    clicked.removeClass("c_off").addClass("c_on");
    $('input[type="submit"]').each(function() {
      var self = $(this);
      if (!clicked.is(self)) {
        if (self.hasClass("c_on") && imageName == self.data("image"))
          self.removeClass("c_on").addClass("c_off");
      }
    });
    e.preventDefault();
  });
});

.c_off {
  color: #000;
  background-color: #F00;
}
.c_on {
  color: #000;
  background-color: #0F0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img src="myfoto1.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="1">
  <input type="submit" value="1" class="c_on" data-image="img1">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form2">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="2">
  <input type="submit" value="2" class="c_off" data-image="img1">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form3">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="3">
  <input type="submit" value="3" class="c_off" data-image="img1">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="1">
  <input type="submit" value="1" class="c_off" data-image="img2">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form2">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="2">
  <input type="submit" value="2" class="c_on" data-image="img2">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form3">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="3">
  <input type="submit" value="3" class="c_off" data-image="img2">
</form>