jQuery：如何创建带有多个单选按钮的实时搜索表单答案

【问题标题】：jQuery: How to create a live search form with multiple radio buttonsjQuery：如何创建带有多个单选按钮的实时搜索表单
【发布时间】：2013-12-16 00:37:56
【问题描述】：

假设，一个数据库包含许多型号、颜色和 2、4 和 5 门汽车的条目。

任务： 创建一个搜索表单，让用户仅使用单选按钮即可选择型号、颜色和门数。每次用户选择单选按钮时，搜索结果都应该更新。没有提交按钮。

HTML 代码：

<form id="searchform">
  <div>
  <input id="car_model1" type="radio" name="model" value="bmw"> BMW
  <input id="car_model2" type="radio" name="model" value="peugeot"> Peugeot
  <input id="car_model3" type="radio" name="model" value="fiat"> Fiat
  </div>

  <div>
  <input id="car_colour1" type="radio" name="colour" value="white"> White
  <input id="car_colour2" type="radio" name="colour" value="red"> Red
  <input id="car_colour3" type="radio" name="colour" value="blue"> Blue
  </div>

  <div>
  <input id="car_door1" type="radio" name="door" value="2"> Two
  <input id="car_door2" type="radio" name="door" value="4"> Four
  <input id="car_door3" type="radio" name="door" value="5"> Five
  </div>
</form>

<div id="searchresult"></div>

现在，我想，我可以使用 jQuery change() 函数来捕捉用户的点击，然后通过 post() 向数据库发送请求。但不知何故，我无法让它工作。这是我的尝试：

Javascript 代码

$("[id^=car]").change(function() {
  var data = $("#searchform").serialize();
  $.post("process_data.php", data, function(response) {
    $("#searchresult").html(response);
  });
});

当然有PHP-Code来处理请求，但问题是Javascript没有被执行。更改事件不起作用。我还用 click() 和 keyup() 进行了尝试。同样的否定结果。

我对 jQuery 和 Ajax 还很陌生，现在我不知道出了什么问题。也许你能告诉我我的错误在哪里。

【问题讨论】：

提供更多细节。控制台中显示什么。？有什么错误吗？

标签： javascript jquery ajax post radio-button

【解决方案1】：

试试这个，

$("input[id^=car]").change(function() {

我不会说你的selector 是错误的。但是在attribute selector 之前使用element name 是一种很好的做法。

小提琴：DEMO

【讨论】：

感谢您的建议。

【解决方案2】：

又过了一天，在睡了个好觉后，我再次尝试，这次我找到了问题的根源：我在我的 HTML 的 <head> 部分加载了脚本。因此我需要确保文档已完全加载，使用 ready() 函数，否则 change() 函数不起作用：

$(document).ready(function() {
  $("input[id^=car]").change(function() {
    var data = $("#searchform").serialize();
    $.post("process_data.php", data, function(response) {
      $("#searchresult").html(response);
    });
  });
});

【讨论】：