2017-10-09 153 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>