Bu makale, JavaScript kullanarak tüm onay kutularını kontrol etme ve işaretini kaldırma yöntemlerini gösterecektir.
JavaScript kullanarak Tüm Onay Kutuları Nasıl Kontrol Edilir ve İşaretleri Kaldırılır?
JavaScript'teki tüm onay kutularını işaretlemek ve işaretini kaldırmak için şunları uygulayabilirsiniz:
- “ document.getElementsByName ” Onay Kutuları ile yöntem
- “ document.getElementsByName Düğmeler ile ” yöntemi
Bahsedilen yaklaşımlar şimdi tek tek tartışılacak!
Yöntem 1: “Checkboxes” ile “document.getElementsByName()” Yöntemini Kullanarak JavaScript'teki Tüm Onay Kutularını İşaretleyin ve İşaretini Kaldırın
“ belge.getElementsByName() ” yöntemi, bağımsız değişkenlerinde belirtilen ada sahip öğeleri döndürür. Bu yöntem, geçirilen ad yardımıyla her bir onay kutusunun değerini almak için uygulanacaktır.
Gösteri için aşağıdaki örneği inceleyelim.
Örnek
İlk olarak, giriş tipi “ olarak belirtilecektir. onay kutusu ” ve her bir onay kutusuna belirli bir ad ve değer atanacaktır:
< giriş tipi = 'onay kutusu' isim = 'sadece' değer = 'Piton' > piton < br />< giriş tipi = 'onay kutusu' isim = 'sadece' değer = 'Java' > Java < br />
< giriş tipi = 'onay kutusu' isim = 'sadece' değer = 'JavaScript' > JavaScript < br />
Şimdi, ' değerine sahip ek bir onay kutusu ekleyin. Tümünü Kontrol Et ” ve bir “ekleyin tıklamada() ” olayı onay kutusu tıklandığında bu şekilde çalışacak olan bu onay kutusu ile “ Kontrol Edildi ()” yöntemi “nesneyle birlikte çağrılır” Bu ” argüman olarak:
< giriş tipi = 'onay kutusu' tıklamada = 'checkUncheck(bu)' /> Tümünü Kontrol Et < br />
Daha sonra “adlı bir fonksiyon tanımlayın. checkUncheck() ” adlı bir değişkenle birlikte JavaScript dosyasında onay kutusu ” bir argüman olarak. Şimdi, “ öğesini kullanarak onay kutusu değerlerine erişin. belge.getElementsByName() ” yöntemi ve “değerini yerleştirin” isim ” niteliği, argümanı olarak.
Son olarak, bir ' için ” tüm onay kutusu değerleri boyunca yineleme yapmak ve “ kontrol ” hepsini işaretli olarak işaretlemek için özellik:
işlev kontrolüİşareti kaldırın ( onay kutusu ) {almak = belge. getElementsByName ( 'sadece' ) ;
için ( İçindeydi = 0 ; i < almak. uzunluk ; i ++ ) {
almak [ i ] . kontrol = onay kutusu. kontrol ; }
}
Gördüğünüz gibi, “ Tümünü Kontrol Et ” onay kutusu işaretlenir, diğer tüm onay kutuları da işaretli olarak işaretlenir:
Yöntem 2: “Düğmeler” İle “document.getElementsByName()” Yöntemini Kullanarak JavaScript'teki Tüm Onay Kutularını İşaretleyin ve İşaretini Kaldırın
“ belge.getElementsByName() ” yöntemi, önceki yöntemde tartışıldığı gibi, argümanlarında belirtilen ada sahip öğeleri getirir. Bir web sayfasında eklenen tüm onay kutularını işaretlemek veya işaretini kaldırmak için kullanılabilir.
Gösteri için aşağıdaki örneğe bakın.
Örnek
Şimdi, her ikisi için de iki düğme ekleyeceğiz “ Tümünü Kontrol Eder ' ve ' Tümünü işaretleme ”işlevleri. Ardından, bir ' tıklamada ” belirtilen işlevlere ayrı ayrı erişecek her iki düğmeli olay:
< giriş tipi = 'buton' tıklamada = 'Kontrol()' değer = 'Tümünü Kontrol Eder' />< giriş tipi = 'buton' tıklamada = 'Kontrolünü kaldır()' değer = 'Tümünün İşaretini Kaldırır' />
Ardından, “ adlı bir işlev tanımlayın. Kontrol() ” ve “uygulayın” document.getElementsByName ” yönteminin belirtilen değeri ile “ isim ' bağlanmak. Ardından, “ için ” önceki yöntemde tartışılan tüm onay kutusu değerleri boyunca döngü yapın.
Ayrıca ilgili butona tıklandığında “ kontrol ” özelliği, tüm onay kutularını işaretler ve işaretli durumu “ olarak ayarlar. doğru ”:
işlev kontrolü ( ) {keçi olmak = belge. getElementsByName ( 'Kontrol' ) ;
için ( İçindeydi = 0 ; i < almak. uzunluk ; i ++ ) {
almak [ i ] . kontrol = doğru ; }
}
Ardından, “ adlı bir işlev tanımlayın. işaretini kaldır() ” ve işaretli kutu özelliğini “ olarak işaretlemek için ters işlevi ekleyin. yanlış ”:
işlevin işaretini kaldır ( ) {keçi olmak = belge. getElementsByName ( 'Kontrol' ) ;
için ( İçindeydi = 0 ; i < almak. uzunluk ; i ++ ) {
almak [ i ] . kontrol = yanlış ; }
}
Çıktıda eklenen düğmelerin mükemmel çalıştığını görebilir:
JavaScript kullanarak tüm onay kutularını işaretlemek ve işaretlerini kaldırmak için en kolay yöntemleri sağladık.
Çözüm
JavaScript kullanarak tüm onay kutularını işaretlemek ve işaretlerini kaldırmak için “ belge.getElementsByName() ” yöntemi ile onay kutuları ” bir onay kutusu eklemek ve onay kutularının işaretlenmesiyle sonuçlanacak olan işleve erişmek veya “ ile aynı yöntemi uygulamak için Düğmeler ” belirtilen tüm değerleri kontrol etmek ve işaretini kaldırmak için iki düğmeyi ayrı ayrı dahil etmek. Bu yazı, JavaScript kullanarak tüm onay kutularını kontrol etme ve işaretini kaldırma yöntemlerini açıkladı.