Belgilangan radio tugmalari asosida sahifadagi elementlarga faol sinf qo'shish va olib tashlash

Menda 3 ta radio tugma bor, har bir nazorat qilingan funktsiyani faol tarkibni "faol" bo'lgan kontentni boshqaradigan sahifadagi ma'lum bir elementga qo'llashni xohlayman.

Faol sinfni bir radio ustida ishlashga muvaffaq bo'ldim, lekin men tekshiruvdan o'tmagan paytda sinfni olib tashlash va boshqa ikkita radio tugmachalarini kodni samarali tarzda yozishni boshdan kechirmoqdaman.

Men ishlaydigan addClass uchun nima bor:

$("input#Beach").click(function() {
     if ($(this).is(":checked")) {
         $("#formBeach").addClass("active");
     }
});

Shunga o'xshab, yana tekshirilmagan bu sinfni qanday qilib o'chirib tashlay olaman? va boshqa ikkita radio ham xuddi shu narsani qilishni o'z ichiga oladi.

Yangilanish: bu erda radio html

  • <input type="radio" id="Tour" name="holiday" checked>
  • <input type="radio" id="Cruise" name="holiday">
  • <input type="radio" id="Beach" name="holiday">

Faqat bitta radiostansiyani tekshirish uchun faqat bitta form bir vaqtning o'zida "faol" bo'lishi mumkin, shuning uchun faol sinflarni maqsadli elementlardan olib tashlash uchun "tekshirilmagan" radio tugmalariga kerak.

0
toggleClass va o'zgarish hodisasi
qo'shib qo'ydi muallif epascarello, manba
Sizning savolingizni tushunib etsam, men javob berganman, agar so'rovlaringiz bo'lsa, ko'rib chiqing va menga xabar bering. Umid qilamanki, sizning muammoingizni hal qilishi mumkin.
qo'shib qo'ydi muallif Prateek Verma, manba

6 javoblar

Please add a common class into the input radio buttons & create event on that class click. I have added some extra parameters in your input radio buttons for matching the id of your forms.

Please keep the id of form & data-form value of radio button same.

Yangilangan kodni toping:

  • <input type="radio" id="Tour" name="holiday" class="check" data-form="form1" checked>
  • <input type="radio" id="Cruise" name="holiday" class="check" data-form="form2" />
  • <input type="radio" id="Beach" name="holiday" class="check" data-form="form3" />
<form name="form1" id="form1" class="form active">
1
</form>
<form name="form2" id="form2"  class="form">
2
</form>
<form name="form3" id="form3"  class="form">
3
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(".check").click(function() {
    $(".form").removeClass("active");
     if ($(this).is(":checked")) {
        var form = $(this).data('form');
        //alert(form);
        $('#'+form).addClass("active");
     }
});
</script>

Iltimos, qo'shimcha kodni talabingizga binoan olib tashlang. Faqat nusxa ko'chiring va kodingizni o'zgartiring.

Umid qilamanki, siz uchun foydali bo'lishi mumkin.

0
qo'shib qo'ydi

Buni ko'ring

$("input#Beach").click(function() {
     if ($(this).is(":checked")) {
         $("#formBeach").addClass("active");
     }else{
         $("#formBeach").removeClass("active");
   }
});
0
qo'shib qo'ydi
U ishlamayapti, sinfi jarimani qo'shib qo'ydi, ammo uni olib tashlamaydi. Men taxmin qilyapman, chunki u sekin urish bilan bog'liq va radio tugmachasini bosib, uni o'chira olmaysiz. Shuning uchun men tekshirilmagan funksiya kerak
qo'shib qo'ydi muallif Louis Anderson, manba

Quyidagi kod men uchun yaxshi ishlaydi. Belgilangan atribut dastlab dastlabki elementga rostlanganligi sababli, sahifani yuklaganida ushbu elementga "faol" sinf qo'shilgan.

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

$("input[name='holiday']").change(function(e){
                $("input[name='holiday']").removeClass('active');
                $(this).addClass('active');
        });
ul li{
  list-style-type: none;
 }
 .active+label{
  background-color: yellow;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  • <input type="radio" id="Tour" name="holiday" checked class="active">
  • <input type="radio" id="Cruise" name="holiday">
  • <input type="radio" id="Beach" name="holiday">
</div> </div>

0
qo'shib qo'ydi

Sizning shaxsiy holatingizda checked xususiyati tekshirish kerak emas.

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

$('.form-group > li').find('input').change(function(){
$('.form-group > li').find('label').addClass('hidden');
  if ($(this).is(":checked")) {
    $(this).parent().find('label').toggleClass('hidden');
  }
});
#formBeach {
  height: 50px;
  width: 50px;
  background: blue;
  display: none;
}

.active {
  display: block !important;
}

.hidden {
display: none;
}

$('.form-group > li').find('input')is(":checked")) {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  • <input type="radio" id="Tour" name="holiday" checked>
  • <input type="radio" id="Cruise" name="holiday">
  • <input type="radio" id="Beach" name="holiday">
</div> </div>

0
qo'shib qo'ydi
@LouisAnderson Ah, radio tugmalari. Mening xatolarim. Siz ko'proq HTML bera olasizmi? Formalar bilan.
qo'shib qo'ydi muallif kind user, manba
@LouisAnderson Radio tugmasi belgilansa, ko'rsatilgan matn paydo bo'lishini xohlaysizmi? Masalan - Ikkinchisining tekshiruvi - "Cruise" matni faqatgina paydo bo'ladi?
qo'shib qo'ydi muallif kind user, manba
@LouisAnderson u yerdamisiz?
qo'shib qo'ydi muallif kind user, manba
@LouisAnderson Men lavozimni tahrir qildim, uni tekshiring.
qo'shib qo'ydi muallif kind user, manba
Men bu yo'ldan borishni xohlayman, lekin aytgandek, har xil shakllarni boshqaradigan 3 ta radio tugma bor. Shuning uchun men bir vaqtning o'zida bitta formada ko'rsatilishi kerak, shuning uchun radio tugmalarining maqsadi; agar ular bekor qilinsa, u sinfni olib tashlaydi.
qo'shib qo'ydi muallif Louis Anderson, manba
Men savolni yangiladim
qo'shib qo'ydi muallif Louis Anderson, manba
shakllar radiosiga yoki, albatta, nima bo'lishidan qat'i nazar, nomlanishi mumkin, ammo men savolni yangiladim
qo'shib qo'ydi muallif Louis Anderson, manba
Ha to'g'ri
qo'shib qo'ydi muallif Louis Anderson, manba

Siz bu ishni qilyapsizmi? @ Luis

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

$(document).ready(function(){
        
        
        $("input#gender").click(function() {
     $('.genderspan').removeClass('active');
         var activespan=$(this).attr('data-gender');
         $('.'+activespan).addClass('active');
});

});
.genderspan.active{ color:#0C3;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="radio" name="gender" id="gender"  data-gender='Male' value="male" checked> Male
<input type="radio" name="gender" id="gender" data-gender='Female' value="female"> Female
<input type="radio" name="gender" id="gender" data-gender='Other' value="other"> Other
Male
FeMale
Other
</div> </div>
0
qo'shib qo'ydi

Ul ga ulashingiz kerak

 
  • <input type="radio" id="Tour" name="holiday" checked>
  • <input type="radio" id="Cruise" name="holiday">
  • <input type="radio" id="Beach" name="holiday">

Keyin:

$("#holidays :input").click(function() {
    $("#holidays :input").each(function() {
      if ($(this).is(":checked")) {
        $("#form" + $(this).attr("id")).addClass("active");
      } else {
        $("#form" + $(this).attr("id")).removeClass("active");
      }
    });
});

Umid qilamanki yordam beradi.

0
qo'shib qo'ydi
Bu erda nima ishlayotganini bilmaymanmi? Menda bunday identifikator yo'q va sahifada ikki marta bir xil identifikatordan foydalana olmaysiz. Faol sinfni har bir individual tekshirilgan radio tugmachasiga asoslangan sahifadagi boshqa element sinflariga qo'llashni xohlayman
qo'shib qo'ydi muallif Louis Anderson, manba
Agustin uchun mukammal rahmat
qo'shib qo'ydi muallif Louis Anderson, manba
#form sizning namunangizda sizning #formBeach deb nomlanganligi sababli, iltimos, ushbu raqamni ikki marta ishlatmaslik kerak, chunki radioformator identifikatoriga ID formatini birlashtirgan im. Sizning shakllaringizni #formBeach, #formCruise va #formTour deb atashingiz mumkin
qo'shib qo'ydi muallif Agustin Dortona, manba
Bunday holda siz radioni bosganingizda radio tugmalarini takrorlashingiz, sinfni tekshirilgan radioga (yuqorida aytib o'tilgan ID bo'yicha) tegishli shaklga qo'shish va sinfni boshqalardan ajratib olishingiz mumkin
qo'shib qo'ydi muallif Agustin Dortona, manba
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