چگونه با d-block برای نمایش یک عنصر با جاواسکریپت به کار ببریم؟

من از بوتاسترپ 4.3.1 استفاده میکنم. و من 4 تا input type=radio دارم برای چگونگی آشنایی با فلان سایت به نام های

• گوگل
• دوستان و آشنایان
• تبلیغات
• بازاریاب

وقتی کاربر بر روی بازاریاب کلیک کرد عنصر referral_code براش نمایش داده بشه که بتونه کد معرف بازاریاب رو وارد کنه.

<div class="form-group row d-none" id="referral_code">
    <label for="referral_code">Referral Code</label>
<div class="col-md-10">
    <input id="referral_code" type="text" class="form-control" name="referral_code">
</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4">

$("#marketer").click(function() {
    $('#referral_code').toggleClass('d-block');
});

رادیوی marketer همین بازاریاب است.

ببین خیلی بد و کثیف کد میزنی ..! وقتی میخوام به سوالای شما جواب بدم تقریبا تمام ساختار کدت رو باید بهتر بکنم ..!

آره میشه با کلاس d-block از بوت‌استرپ bootstrap این چیزی رو که میخوای، انجام بدی. همونطور که خودت هم توی کدت نوشتی، در ابتدا به المنت مربوطه کلاس d-none رو میدی بعد مبتنی بر یک رویدادی eventی کلاس رو به d-block تغییر میدی. همچنین وقتی داری دکمه input از نوع radio میسازی، سعی کن براشون label هم ست کنی که کاربر متوجه بشه چی هستن. اینم این کدی که میخوای:

اچ تی ام ال HTML

<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="google" value="1">
  <label class="form-check-label" for="google">google</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="friends" value="2">
  <label class="form-check-label" for="friends">friends</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="advertising" value="3">
  <label class="form-check-label" for="advertising">advertising</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="familiar" id="marketer" value="4">
  <label class="form-check-label" for="marketer">marketer</label>
</div>

<div class="col-sm-5 d-none" id="referral_code">
    <input type="text" class="form-control" name="referral_code" placeholder="Write referral code here" />
</div>

جی کوئری jQuery

$("input[name=familiar]").click(function() {
    if ( $('#marketer').is(":checked") ){
    $('#referral_code').addClass('d-block');
  } else {
    $('#referral_code').removeClass('d-block');
  }  
});

نمونه آنلاین

نکته1: طبیعتا کتابخونه جی کوئری و بوت‌استرپ باید به پروژه اضافه باشن که بشه خروجی کدهای بالا رو به درستی دید.

نکته2: توی کدهایی که خودت توی سوالت نوشتی، دوبار از referral_code به عنوان مقدار id استفاده کردی که این اشتباه هست. توی HTML باید مقادیر idها در تمام صفحه یکتا unique باشن.

امیدوارم که کدی که زدم بهت کمک کنه.