Question

我的表格如下：

<label>
  scale a<input type="radio" name="sellorbuy" value="Yes" id="rdYes" />
</label>
<label class="leftspace">
  scale b<input type="radio" name="sellorbuy" value="No" id="rdNo" />
</label>

<p class="searchpg">Price</p>

<fieldset id="sell">
  <select id="pricemin" name="minsell" class="form-control">
    <option value="50000">Min Price</option>
    <option value="100000">£100,000</option>
    <option value="200000" >£200,000</option>
    <option value="300000" >£300,000</option>
    <option value="400000" >£400,000</option>             
  </select>

  <select id="pricemax" name="maxsell" class="form-control">
    <option value="5000000">Max Price</option>
    <option value="100000">£100,000</option>
    <option value="200000">£200,000</option>
    <option value="300000">£300,000</option>
    <option value="400000">£400,000</option>
    <option value="500000">£500,000</option>             
  </select>
</fieldset>

<fieldset id="let" style="display:none;">
  <select id="lpricemin" name="minbuy" class="form-control">
    <option value="500">Min Price</option>
    <option value="500">£500</option>
    <option value="600">£600</option>
    <option value="700">£700</option>
    <option value="800">£800</option>
    <option value="900">£900</option>
  </select>

  <select id="lpricemax" name="maxbuy" class="form-control">
    <option value="5000">Max Price</option>
    <option value="600">£600</option>
    <option value="700">£700</option>
    <option value="800">£800</option>
    <option value="900">£900</option>
    <option value="1000">£1000</option>
    <option value="1150">£1150</option>
  </select>
</fieldset>

使用以下方法切换字段集：

$("input[name='sellorlet']").change(function () {
    $("#sell").toggle(this.value == "Yes");
    $("#let").toggle(this.value == "No");
});

我遇到的麻烦是提交并显示在下一页上的搜索表单，因此我们会继承表单的内容。如果有人选择了“比例B”，那么在下一页已经切换但是字段集没有改变？是否有任何方法可以更改为jquery以检测切换哪个复选框并相应地更改字段集，甚至修改开关以使其更好地工作？

创建一个小提琴来展示表单的工作原理https://jsfiddle.net/v3waaa20/1/

Answer 1

一些轻微的变化和触发负载变化都可以解决问题。

$("input[name='sellorbuy']").change(function () {
    value = $("input[name='sellorbuy']:checked").val();
    $("#sell").toggle(value == "Yes");
    $("#let").toggle(value == "No");
}).change();

带有复选框选项的HTML表单，用于选择字段集

1 个答案: