Turli xil radiostantsiyalarda turli formalarni ochish

Menda uchta radio tugma bor, men bir radio tugma sukut bo'yicha tekshirilishini va "a" shaklini ochish foydalanuvchi boshqa radio tugmachasini bosing qadar ochiq qolishni istayman. Quyidagi shakl radio tugmasi bilan bog'liq;

Kodi:





<div class="form-a" > </div>
<div class="form-b" > </div>
<div class="form-c" > </div>
1
Ochiq shaklda nima demoqchisiz?
qo'shib qo'ydi muallif rahulsm, manba
shaklga foydalanuvchini ko'rsatish
qo'shib qo'ydi muallif Harris Khan, manba
shaklga foydalanuvchini ko'rsatish
qo'shib qo'ydi muallif Harris Khan, manba
Radiosizgi tugmachasining qiymatini skriptda va siz yashiradigan qiymatga asoslanib olishingiz va kerakli shaklni ko'rsatishingiz mumkin.
qo'shib qo'ydi muallif Pankaj Kumar Singh, manba
Radiosizgi tugmachasining qiymatini skriptda va siz yashiradigan qiymatga asoslanib olishingiz va kerakli shaklni ko'rsatishingiz mumkin.
qo'shib qo'ydi muallif Pankaj Kumar Singh, manba

6 javoblar

Bu erda siz fikringizni berish uchun tezkor namuna (men sizning belgilaringizni ishlatgan edim).

Asosan, har bir shaklni yashir va faqat .activ sinfga ega bo'lganni ko'rsating. Radio kirishlaridagi o'zgarishlarda .activ sinfni to'g'ri shaklga qo'shish uchun maxsus atributlardan foydalaning (bu holda ma'lumotlar id raqami).

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $('.form-switch').on('change', function() {
    $('.form').removeClass('active');
    var formToShow = '.form-' + $(this).data('id');
    $(formToShow).addClass('active');
  });
});
.form {
  display: none;
}
.form.active {
  display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div class="form form-a active"> form a </div>
<div class="form form-b"> form b </div>
<div class="form form-c"> form c</div>
</div> </div>
1
qo'shib qo'ydi

Bu erda siz fikringizni berish uchun tezkor namuna (men sizning belgilaringizni ishlatgan edim).

Asosan, har bir shaklni yashir va faqat .activ sinfga ega bo'lganni ko'rsating. Radio kirishlaridagi o'zgarishlarda .activ sinfni to'g'ri shaklga qo'shish uchun maxsus atributlardan foydalaning (bu holda ma'lumotlar id raqami).

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  $('.form-switch').on('change', function() {
    $('.form').removeClass('active');
    var formToShow = '.form-' + $(this).data('id');
    $(formToShow).addClass('active');
  });
});
.form {
  display: none;
}
.form.active {
  display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div class="form form-a active"> form a </div>
<div class="form form-b"> form b </div>
<div class="form form-c"> form c</div>
</div> </div>
1
qo'shib qo'ydi

You can do this. https://jsfiddle.net/75a7p9qa/2/





<div class="form-a">a</div>
<div class="form-b" style="display: none">b</div>
<div class="form-c" style="display: none">c</div>
<script type="text/javascript">
$(document).ready(function() {
  $('input[name=colorCheckbox]:radio').change(function(e) {
    let value = e.target.value.trim()

    $('[class^="form"]').css('display', 'none');

    switch (value) {
      case 'red':
        $('.form-a').show()
        break;
      case 'green':
        $('.form-b').show()
        break;
      case 'blue':
        $('.form-c').show()
        break;
      default:
        break;
    }
  })
})
</script>
0
qo'shib qo'ydi
bacause Letter mavjud ekstraditsiya 5 va brauzerlarda standart JavaScript ecmascript 4 bor. Let var o'zgartirish uchun bor va u ishlaydi
qo'shib qo'ydi muallif mtizziani, manba
Xa, men qiymat satriga ruxsat berayapmanmi?
qo'shib qo'ydi muallif Harris Khan, manba

You can do this. https://jsfiddle.net/75a7p9qa/2/





<div class="form-a">a</div>
<div class="form-b" style="display: none">b</div>
<div class="form-c" style="display: none">c</div>
<script type="text/javascript">
$(document).ready(function() {
  $('input[name=colorCheckbox]:radio').change(function(e) {
    let value = e.target.value.trim()

    $('[class^="form"]').css('display', 'none');

    switch (value) {
      case 'red':
        $('.form-a').show()
        break;
      case 'green':
        $('.form-b').show()
        break;
      case 'blue':
        $('.form-c').show()
        break;
      default:
        break;
    }
  })
})
</script>
0
qo'shib qo'ydi
bacause Letter mavjud ekstraditsiya 5 va brauzerlarda standart JavaScript ecmascript 4 bor. Let var o'zgartirish uchun bor va u ishlaydi
qo'shib qo'ydi muallif mtizziani, manba
Xa, men qiymat satriga ruxsat berayapmanmi?
qo'shib qo'ydi muallif Harris Khan, manba

More simple (using jQuery): https://jsfiddle.net/0s96dgq8/

HTML:





<div class="form form-red">red</div>
<div class="form form-green">green</div>
<div class="form form-blue">blue</div>

JavaScript:

function selectForm() {
  $("div.form").hide();
  $("div.form-" + $("input:checked").val()).show();
}
selectForm();
$("input").click(function(){selectForm()});
0
qo'shib qo'ydi

More simple (using jQuery): https://jsfiddle.net/0s96dgq8/

HTML:





<div class="form form-red">red</div>
<div class="form form-green">green</div>
<div class="form form-blue">blue</div>

JavaScript:

function selectForm() {
  $("div.form").hide();
  $("div.form-" + $("input:checked").val()).show();
}
selectForm();
$("input").click(function(){selectForm()});
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb