Функция JQuery - запускается при щелчке и на загрузке страницы для определенного переключателя

Question

Новое для JQuery, и у меня есть следующая функция. Я пытаюсь изменить его, чтобы он делал 2 вещи: не запускать функцию, когда я нажимаю другие переключатели (я думал, что «#UpdateType input [type =« radio »]» сделает это), а также запустит функцию при загрузке как на клике. #UpdateType - это идентификатор для переключателей, с которыми я пользуюсь. У кого-нибудь есть предложения?

$(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.

Edit: 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> 

Razor:

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

Edit 2: Обновление JQuery благодаря @KristianBarrett. Работает иначе, чем $ (документ). Я пытался реализовать.

То, что я в целом пытаюсь достичь, скрывает/показывает определенные требуемые элементы на странице, основанные на этом переключателе. Он изначально загружается с ни одним проверенным, поэтому пользователь вынужден выбрать его. Затем я использую Foolproof для выполнения RequiredIf на основе этих флажков («Текущий») и хочу показать их пользователю после того, как «Текущий» отмечен JQuery. Проблема заключается в том, что при проверке выдает ErrorMessage после отправки, флажок Current помечается все же, но поля скрыты, пока я не вручную его вручную не нажму. Поля скрыты по умолчанию.

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 EVERYTIME пробеги страницы. Итак, вы повторяете свои флажки и обнаруживаете отмеченный и нажимаете на него.

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

это даст вам проверочный переключатель. Затем вы можете передать его в clickFunc на $(document).ready()

EDIT:

Другая вещь, которую вы делаете, жестко прописывать против некоторых конкретных идентификаторов. Вы должны скорее подумать в более общем плане. Как и выбор всех переключателей, а затем поиск отмеченного. Это делает ваш код менее подверженным ошибкам, когда вы меняете свой идентификатор модели.Чем чаще вы можете сделать код, тем меньше вам нужно поддерживать.

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(); 
    } 
}