JQueryラジオボタンをクリックするUncaught throw TypeError：未定義の 'indexOf'プロパティを読み取ることができません

Question

特定のラジオボタンをクリック/チェックすると、いくつかの要素を表示または非表示にするフォームがあります。この関数は、MVC検証がポスト時にエラーで戻ってきた場合にも、ページ・ロードで実行する必要があります。問題は私がページの読み込みにTypeError: Cannot read property 'indexOf' of undefinedを得ていることです。コードは機能しますが、スクリプトセクションの下にあるすべてのコードが壊れてしまいます。私は、ここでラジオボタンが正しく選択されているかどうかチェックしていないという結論に達しています：if ($element.attr('class').indexOf('update-type-check-current') !== -1)。

はJQuery：

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

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

HTML：

<div class="form-group"> 
    <label class="col-md-2 control-label" for="UpdateType">New or Current?</label> 
    <div class="col-md-10" id="CurrentEmployeeRB"> 
     <label class="radio-inline"> 
      <input class="btn btn-primary update-type-check-new" 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 class="btn btn-secondary update-type-check-current" 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> 

レイザー：

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

は、私がこれを行うべきである別の方法はありますか？私はちょうどJQueryを学んでいるところですが、これまでの検索では何の選択肢も見つけられません。

Answer 1

あなたはhasClassを使用し、indexOfで検索しない

if($('#CurrentEmployeeRB input[type=radio]:checked').length >= 1) { 
    clickFunc($('#CurrentEmployeeRB input[type=radio]:checked')); 
} 

Answer 2

で準備

clickFunc($('#CurrentEmployeeRB input[type=radio]:checked')); 

で行を変更する必要があります。セレクタによって要素が返されなかった場合、コードは失敗します。

function clickFunc($element) { 
    var currentEmployee = $('.current-employee'); 

    if($element.hasClass('update-type-check-current')) { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
} 

だけヒント：あなたも同じタスクのためtoggleを使用することができます。

function clickFunc($element) { 
    $('.current-employee').toggle($element.hasClass('update-type-check-current')); 
} 

Answer 3

まず$('#CurrentEmployeeRB input[type="radio"]:checked')に$('#CurrentEmployeeRB input[type=radio]:checked')を変更し、最初に文書をロードした後、何のラジオボタンがチェックされていないので、$elementは何も含まれていません。あなたはそのエラーが発生するので、if statementの中にロジックを入れてください。

if($element.length != 0) {} 

JS：

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

function clickFunc($element) { 
    if($element.length != 0) { 
    var currentEmployee = $('.current-employee'); 
    console.log($element); 
    if ($element.attr('class').indexOf('update-type-check-current') !== -1) { 
     currentEmployee.show(); 
    } 
    else { 
     currentEmployee.hide(); 
    } 
     } 
}