2017-10-09 152 views
0

我有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(); 
+1

没有理由为什么你需要更改事件3次单独绑定。您可以将逻辑合并为一个。要将哪个输入元素绑定到更改事件侦听器?选择元素?文本/数字输入? – Terry

+0

你可以在html中设置默认值,你尝试过吗? –

+1

我们需要看到您的HTML来帮助您,尽管听起来您只需要在相关的“输入”上添加一个“checked”属性即可。 –

回答

0

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

onload 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>