こちらのjQueryの記述をjavascriptの記述に変換していただきたいです

Question

閲覧ありがとうございます。
早速ではありますが、以下のjQueryの記述をjavascriptの記述に変換していただきたいです。
ベースの仕組みが古すぎてjqueryを読み込むとエラーが出てしまいjavascriptで書くしかないという状況によるものです。

該当のソースコード

■html

<input type="radio" id="country_kbn1" name="country_kbn" value="1">&nbsp;日本
<input type="radio" id="country_kbn2" name="country_kbn" value="2">&nbsp;海外
<input type="text" name="txt_country_name" size="30" maxlength="100" value="">

■jQuery

$(document).onload(function(){
    //ラジオボタンがクリックされた時
    $('input[name="country_kbn"]').click(function(){
        //チェックされたラジオボタンの値が1だったら
        if($('input[name="country_kbn"]:checked').val() == 1){
            //テキストボックスを非表示
            $('input[name="txt_country_name"]').css('display','none');
        }else{
            //テキストボックスを表示
            $('input[name="txt_country_name"]').css('display','inline-block');
        }
    });
});

実現したいこと

「country_kbnというnameのラジオボタンをクリックした時に（changeでもOK）、
選択されているラジオボタンの値が1かどうかを判定し、それぞれの状況に合わせてテキストボックスを表示したり非表示にしたりする。」

以上のことをjavascriptで実現できれば表記方法は問いません。

最後に

私が力不足なため皆様のお力をお借りしたく、こちらに投稿させていただきました。
jQueryの記述が間違っているかもしれませんが、ご容赦下さいませ。
お手数おかけしますが、よろしくお願いいたします。

Comments

[maisumakun]

古いブラウザはどれぐらいまで対応する必要があります？（特に、IEとAndroidについて）

[se_ariga]

IEは10くらいまでです、表記忘れで申し訳ないのですがPCで見る前提のページになりますのでスマートフォンやタブレットは考慮しないです！

Answer 1

window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('input[name="country_kbn"]'),function(x){
    x.addEventListener('change',function(e){
      document.querySelector('input[name="txt_country_name"]').style.display=(e.target.value==1?'none':'inline-block');
    });
  });
});

<input type="radio" id="country_kbn1" name="country_kbn" value="1">&nbsp;日本
<input type="radio" id="country_kbn2" name="country_kbn" value="2">&nbsp;海外
<input type="text" name="txt_country_name" size="30" maxlength="100" value="">

追記

こういうこと？

HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('input[name="country_kbn"]'),function(x){
    x.addEventListener('change',function(e){
      document.querySelector('input[name="txt_country_name"]').style.display=(e.target.value==1?'none':'inline-block');
    });
    if(x.checked) x.trigger('change');
  });
});

<input type="radio" id="country_kbn1" name="country_kbn" value="1" checked>&nbsp;日本
<input type="radio" id="country_kbn2" name="country_kbn" value="2">&nbsp;海外
<input type="text" name="txt_country_name" size="30" maxlength="100" value="">

Comments

[se_ariga]

ご解答ありがとうございます！
思った通りの動きが実装できました、ありがとうございます。
すみません、大変恐縮なのですが、ラジオボタンの値が何かを判定してテキストボックスを表示非表示切り替える処理を、ページ表示した時にも走らせなければいけないのですが、無駄の無いソースコードで解読が難しくどう変更したら良いのかわかりません。。
申し訳ないのですが、そちらも考慮したコードを教えていただけないでしょうか？
よろしくお願いいたします！

[se_ariga]

こういうことです！！！！！
何がどうなってるのかはわかりませんが完璧です！！！
ありがとうございました！

[yambejp]

デフォルトで選ばれている可能性があるということですね？
追加しました