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

标签 javascript jquery html forms

我有一个如下所示的表单:

<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来检测哪个复选框被切换并相应地更改字段集,甚至修改开关以使其更好地工作?

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

最佳答案

一些细微的改变和触发负载变化就可以达到目的。

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

关于javascript - 带有用于选择字段集的复选框选项的 HTML 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32480127/

相关文章:

javascript - 如何仅在调用jquery覆盖时才执行javascript?

javascript - 使用 Javascript 和 PHP 的 HTML 表单编号类型唯一用户输入

jquery - 如何根据var切换样式id

jquery - 如何根据另一个选择框的选择更改选择框的选项值

JQuery 停止动画队列(多次单击)

javascript - HTML5 Canvas 呈现奇怪

javascript - 仅使用 JavaScript 检查用户是否有网络摄像头?

javascript - Safari 桌面中触摸事件未触发

javascript - 在 Internet Explorer 中从字符串插入 &lt;style&gt; 标签

javascript - 如何使用jquery制作恒定的动画