Jquery-ni ishlatib, ikki xil joyga bir xil nomdagi katakchalarni belgilash va bekor qilinmagan qiymatlarni qanday tekshirish mumkin?

Quyidagi kabi ikkita alohida joyga ega bo'lgan tasdiqlov varaqalari bor

Bir joy

<input name="checkbox-group" class="place1" value="1" type="checkbox"  />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="1" type="checkbox" />

Ikkinchi o'rin

<input name="checkbox-group" class="place2" value="1" type="checkbox"  />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="1" type="checkbox" />

mening savolim yangilandi, plz bir marta tekshirib turing, aslida bitta joyga bitta checkbox qiymati xuddi shu va 5 checkbox qiymati bir xil, shuning uchun qaysi katagiga ushbu katakchani tanlaymiz, bu holda ikkala qiymat ham tekshiriladi.

Men xohlagan narsam, avtomatik ravishda bitta joyning 1-raqamini tanlasam, u ikkinchi o'ringa 1 va shuningdek, ikkinchi o'rin tanlash qiymatini avtomatik ravishda tanlaydi 1 birinchi qiymatni tanlang 1 jquery, plz yordamida menga yordam bering.

 var vtypeid = [];
        $.each($("input[name='vtypeid']:checked"), function(){    
            vtypeid.push($(this).val());

        }); 

Bu kodni qanday ishlatishni istagan har qanday kishi.

0

6 javoblar

Ushbu funktsiyaning bir qismi bo'lmagan sahifada boshqa tasdiqlash qutilari bo'lsa, name = "checkbox-group" ga asoslangan holda tanlash:

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

$(document).ready(function() {
  var cbs = $('input[name="checkbox-group"]').click(function() {
    cbs.filter(($(this).is(".place1") ? ".place2" : ".place1")
               + '[value="' + this.value + '"]')
       .prop('checked', this.checked)  
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First group:
<input name="checkbox-group" class="place1" value="1" type="checkbox"  />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />


Second group: <input name="checkbox-group" class="place2" value="1" type="checkbox" /> <input name="checkbox-group" class="place2" value="2" type="checkbox" /> <input name="checkbox-group" class="place2" value="3" type="checkbox" /> <input name="checkbox-group" class="place2" value="4" type="checkbox" /> <input name="checkbox-group" class="place2" value="5" type="checkbox" />
</div> </div>

Eslatma: tasdiqlash kutuları uchun, o'zgarish voqea emas, balki tıklama voqea tavsiya qilaman, chunki ikkinchisi ba'zi bir sobiq brauzerlarda klaviatura kiritish uchun g'alati bir oz harakat qiladi.

1
qo'shib qo'ydi

change hodisasini class place1 va place2 va value xususiyatidan foydalanib bog'lashingiz mumkin turli joylarda tasdiqlash qutilarini tekshirib, bekor qilishi mumkin.

$(".place1").change(function() {
   $("input[value=" + $(this).attr("value") + "].place2").prop("checked", $(this).prop("checked"));
});

$(".place2").change(function() {
    $("input[value=" + $(this).attr("value") + "].place1").prop("checked", $(this).prop("checked"));
});
1
qo'shib qo'ydi

Turli yo'llar mavjud. bu yo'llardan biridir

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

$('[name = checkbox-group]').on('click', function() {
   var val = $(this).val();
   $('[name = checkbox-group][value='+val+']').prop('checked', $(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First
<input name="checkbox-group" class="place1" value="1" type="checkbox"  />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />

   
second <input name="checkbox-group" class="place2" value="1" type="checkbox" /> <input name="checkbox-group" class="place2" value="2" type="checkbox" /> <input name="checkbox-group" class="place2" value="3" type="checkbox" /> <input name="checkbox-group" class="place2" value="4" type="checkbox" /> <input name="checkbox-group" class="place2" value="5" type="checkbox" />
</div> </div>
0
qo'shib qo'ydi

bu kodni ishlashi kerak

$(document).ready(function() {
        $('input[type="checkbox"][name=checkbox-group]').change(function() {
            $("input[name=checkbox-group][value='" + $(this).val() + "']").prop('checked', $(this).is(':checked'))
        });
    });
0
qo'shib qo'ydi

Quyidagi parchani tekshiring.

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

$(document).ready(function(){
  $("input.place1[name=checkbox-group]").on('click', function(){
    if($(this).prop('checked')){
      $("input.place2[value="+$(this).val()+"]").prop('checked', true);
    }
    else{
      $("input.place2[value="+$(this).val()+"]").prop('checked', false);
    }
      
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 1st
  <input name="checkbox-group" class="place1" value="1" type="checkbox"  />
  <input name="checkbox-group" class="place1" value="2" type="checkbox" />
  <input name="checkbox-group" class="place1" value="3" type="checkbox" />
  <input name="checkbox-group" class="place1" value="4" type="checkbox" />
  <input name="checkbox-group" class="place1" value="5" type="checkbox" />
</div>

<div> 2nd
  <input name="checkbox-group" class="place2" value="1" type="checkbox"  />
  <input name="checkbox-group" class="place2" value="2" type="checkbox" />
  <input name="checkbox-group" class="place2" value="3" type="checkbox" />
  <input name="checkbox-group" class="place2" value="4" type="checkbox" />
  <input name="checkbox-group" class="place2" value="5" type="checkbox" />
</div>
</div> </div>
0
qo'shib qo'ydi
kirish ga teng qiymat bilan place2 ega bo'lgan kirish
qo'shib qo'ydi muallif aje, manba
ha, siz to'g'ri @ nnnnnn ..... parchasi yangilandi
qo'shib qo'ydi muallif aje, manba

noyob id berishga o'xshash ishlarni qilish

 <input name="checkbox-group" id="chk1" class="place1" value="1" type="checkbox" onclick="document.getElementById('chk2').checked = this.checked;" />


    <input name="checkbox-group_1" id="chk2" class="place2" value="1" type="checkbox" onclick="document.getElementById('chk1').checked = this.checked;" />
0
qo'shib qo'ydi
Ammo ... har bir tasdiqlash uchun alohida sekin urish moslamalari bo'lishi kerak. Bu muammo emasmi?
qo'shib qo'ydi muallif nnnnnn, 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