Question

我有3个onchange事件选项可以打开和隐藏单选按钮值。我不确定如何设置第一个（值== 2）默认情况下已在页面上打开。任何有关这方面的帮助将不胜感激。以下是我目前的代码。

$('input[name="type"]').on('change', function () {
    $('.opening-fields').toggle(+this.value === 1 && this.checked);
    $('.qualify-fields').toggle(+this.value === 2 && this.checked);
    $('.verify-fields').toggle(+this.value === 3 && this.checked);
    $('.datasheet-fields').toggle(+this.value === 4 && this.checked);
}).change();

Answer 1

您可以使用switch语句确定已检查的无线电输入的值...然后.show()相关元素。

要checked onload的那个应该在HTML中具有checked属性。

我假设所有元素都默认隐藏....所以我使用了hidden类。这可能与您的代码有所不同......仅供参考。

$('input[name="type"]').on('change', function () {
  
  // Only for the checked input
  if(this.checked){
    // Hide them all
    $(".hidden").hide();

    // determine which to show
    switch(this.value){
      case "1":
        $('.opening-fields').show();
        break;
      case "2":
        $('.qualify-fields').show();
        break;
      case "3":
        $('.verify-fields').show();
        break;
      case "4":
        $('.datasheet-fields').show();
        break;
     }
  }
}).trigger("change"); // Trigger a change event Onload

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1:<input type="radio" name="type" value="1"><br>
2:<input type="radio" name="type" value="2" checked><br> <!-- checked onload -->
3:<input type="radio" name="type" value="3"><br>
4:<input type="radio" name="type" value="4"><br>
<br>
<br>
<div class="opening-fields hidden">opening-fields</div>
<div class="qualify-fields hidden">qualify-fields</div>
<div class="verify-fields hidden">verify-fields</div>
<div class="datasheet-fields hidden">datasheet-fields</div>

在更改值上加载默认值

1 个答案: