JQuery函數 - 在點擊和頁面加載時運行特定的單選按鈕

Question

JQuery的新功能和我有以下功能。我試圖修改它，所以它做了2件事：當我點擊其他單選按鈕時，不會觸發該功能（我認爲'#UpdateType input [type =「radio」]'會這樣做），並且也會在加載時運行該函數如點擊。 #UpdateType是我正在使用它的單選按鈕的ID。有沒有人有什麼建議？

$(document).ready(updateTypeFunc); 
$(document).ready(function() { 
    $('#UpdateTypeRB input[type="radio"]').click(updateTypeFunc); 
}); 
function updateTypeFunc() 
{ 
    if ($(this).attr('id') == 'UpdateType' && $(this).val() == 'Current') { 
     $('.current-employee').show(); 
    } 
    else { 
     $('.current-employee').hide(); 
    } 
} 

截至目前，當我點擊任何單選按鈕（無論ID如何）時都會觸發。

編輯：HTML

<div class="col-md-10" id="UpdateTypeRB"> 
    <label class="radio-inline"> 
     <input class="btn btn-primary" data-val="true" data-val-required="Please select whether the employee is new or current." id="UpdateType" name="UpdateType" type="radio" value="New"> New 
    </label> 
    <br> 
    <label class="radio-inline"> 
     <input checked="checked" class="btn btn-secondary" id="UpdateType" name="UpdateType" type="radio" value="Current"> Current 
    </label> 
    <br> 
    <span class="field-validation-valid text-danger" data-valmsg-for="UpdateType" data-valmsg-replace="true"></span> 
</div> 

剃刀：

<div class="form-group"> 
    @Html.LabelFor(m => m.UpdateType, new { @class = "col-md-2 control-label" }) 
    <div class="col-md-10"> 
     <label class="radio-inline"> 
      @Html.RadioButtonFor(m => m.UpdateType, "New", new { @class = "btn btn-primary" }) New 
     </label> 
     <br /> 
     <label class="radio-inline"> 
      @Html.RadioButtonFor(m => m.UpdateType, "Current", new { @class = "btn btn-secondary" }) Current 
     </label> 
     <br /> 
     @Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger" }) 
    </div> 
</div> 

編輯2：更新JQuery的感謝@KristianBarrett。除了我試圖實現的$（document）.ready以外的其他作品。

我總體努力實現的是隱藏/顯示基於此單選按鈕打勾的頁面上的某些必需元素。它最初加載沒有檢查，所以用戶被迫選擇一個。然後，我使用Foolproof來根據這些複選框（'Current'tick）執行RequiredIf，並且想要在用JQuery勾選'Current'之後向用戶顯示它們。問題是驗證在提交後拋出一個ErrorMessage時，當前複選框被打勾，但是這些字段被隱藏，直到我再次手動點擊它。這些字段默認爲隱藏。

Answer 1

你需要作出兩種不同的選擇：

<div class="form-group"> 
@Html.LabelFor(m => m.UpdateType, new { @class = "col-md-2 control-label" }) 
<div class="col-md-10"> 
    <label class="radio-inline"> 
     @Html.RadioButtonFor(m => m.UpdateType, "New", new { @class = "btn btn-primary new" }) New 
    </label> 
    <br /> 
    <label class="radio-inline"> 
     @Html.RadioButtonFor(m => m.UpdateType, "Current", new { @class = "btn btn-secondary current" }) Current 
    </label> 
    <br /> 
    @Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger" }) 
</div> 

那麼你可以申請@checked = true你的單選按鈕，你想擁有點擊頁面加載。像這樣

@Html.ValidationMessageFor(m => m.UpdateType, "", new { @class = "text-danger", @checked = true }) 

當你綁定你的價值觀，以兩個不同的值你的模型，那麼你的服務器將解析選擇之一，應該正確設置它們一旦返回你的看法。

之後，你需要應用stweb給你的答案，但你需要尋找檢查一個。

$(document).ready(function() { 
    $('input[type="radio"]').click(function() { 
     clickFunc($(this)); 
    }); 
    clickFunc($('input[type=radio]:checked')); 
}); 

function clickFunc($element){ 
    var currentEmployee = $('.current-employee'); 
    if ($element.attr('class').indexOf('current') !== -1) { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
} 

你需要重新申請的JavaScript每次頁面運行：

所以像你應該做的事情。所以你迭代你的複選框並找到選中的並點擊它。

$('input[type=radio]:checked') 

這會給你選中的單選按鈕。然後，你可以將它傳遞給clickFunc上$(document).ready()

編輯：

你正在做的是硬編碼針對某些特定的ID另一件事。你應該更普遍地思考。就像選擇所有單選按鈕，然後找到選中的單選按鈕。當您更改模型的ID時，這會使您的代碼更容易出錯。你可以製作代碼越通用，就越不需要維護。

Answer 2

要觸發負荷試試這個：

$(document).ready(function() { 
    var $radioButton = $('#UpdateType input[type="radio"]'); 
    $radioButton.click(function() { 
     clickFunc($(this)); 
    }); 
    clickFunc($radioButton); 
}); 

function clickFunc($element){ 
    var currentEmployee = $('.current-employee'); 
    if ($element.attr('id') == 'UpdateType' && $element.val() == 'Current') { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
}