Bu yazı, JavaScript kullanarak onay kutusunu işaretleme ve işaretini kaldırma prosedürünü açıklayacaktır.
JavaScript Kullanarak Onay Kutusu Nasıl İşaretlenir/İşareti Kaldırılır?
JavaScript'teki onay kutularını işaretlemek veya işaretlerini kaldırmak için “ kontrol ' bağlanmak. İlk olarak, ' HTML öğesinin referansını alın ' onay kutusu ” atanan yardımı ile “ İD ' kullanmak ' getElementById() ” yöntemi ve ardından “ kontrol ” değeri üzerindeki özellik.
Örnek 1: Tekli Onay Kutusunu İşaretleyin/İşaretini Kaldırın
Öncelikle, aşağıdaki kod satırlarıyla bir HTML dosyası oluşturun:
< h3 > Onay kutusunu işaretlemek veya işaretini kaldırmak için düğmeleri tıklayın h3 >
< giriş tipi = 'onay kutusu' İD = 'onay kutusu' > Şartlar ve koşulları kabul edin < br >< br >
< düğme tipi = 'buton' tıklamada = 'Kontrol()' > Evet buton >
< düğme tipi = 'buton' tıklamada = 'işareti kaldır()' > Hayır buton >
Yukarıdaki kodda:
- “ kimliğiyle bir onay kutusu oluşturun. onay kutusu ' öğeye erişmek için kullanılacak ' onay kutusu ” eylemleri gerçekleştirmek için.
- İki düğme oluşturun, “ Evet ' ve ' Hayır ', işlevi tetikleyecek onay kutusunu işaretlemek veya işaretini kaldırmak için' Kontrol() ' ve ' işareti kaldır() ” sırasıyla tıklama olayında.
Yukarıdaki kodu çalıştırdıktan sonra çıktı şöyle olacaktır:
Ardından, JavaScript dosyasındaki veya etiketindeki onay kutusunda eylemleri gerçekleştirmek için işlevleri tanımlayın. Onay kutusunu işaretlemek için aşağıdaki kod satırlarını kullanın:
işlev Kontrol ( ) {
girişe izin ver = belge. getElementById ( 'onay kutusu' ) ;
giriş. kontrol = doğru ;
}
Yukarıdaki kodda:
- Bir işlev tanımlayın ' Kontrol() ”, onay kutusunu işaretlemek için düğmeyi tıklatacaktır.
- İşlevin gövdesi içinde, kimliğini kullanarak onay kutusunun referansını alın ' onay kutusu '' yardımıyla getElementById() ” yöntemi ve bir değişkende saklayın” giriş ”.
- “ ayarlayarak onay kutusunu işaretleyin. kontrol ' Emlak ' doğru ”.
Onay kutusunun işaretini kaldırmak için “ Hayır ” düğmesine basmak için aşağıdaki kodu kullanın:
işlev işaretini kaldır ( ) {girişe izin ver = belge. getElementById ( 'onay kutusu' ) ;
giriş. kontrol = yanlış ;
}
Yukarıdaki kod parçacığı:
- Bir işlev tanımlayın ' işareti kaldır() ”, onay kutusunun işaretini kaldırmak için düğmeyi tıklatacaktır.
- İşlevin gövdesi içinde, kimliğini kullanarak onay kutusunun referansını alın ' onay kutusu '' yardımıyla getElementById() ” yöntemi ve bir değişkende saklayın” giriş ”.
- “ ayarlayarak onay kutusunun işaretini kaldırın. kontrol ' Emlak ' yanlış ”.
Son olarak, sayfa yüklemede varsayılan olarak onay kutusunun işaretini kaldıracak bir işlev tanımlayın. pencere.onload ' Etkinlik:
pencere. aşırı yük = işlev ( ) {pencere. addEventListener ( 'yük' , Kontrol , yanlış ) ;
}
Çıktı
Çıktı, butonlara tıklandığında onay kutusunun işaretlendiğini ve başarılı bir şekilde işaretlenmediğini gösterir.
Örnek 2: Birden Fazla Onay Kutusunu İşaretleyin/İşaretini Kaldırın
Tüm onay kutularının aynı anda nasıl işaretleneceğine veya işaretlerinin kaldırılacağına dair bir örnek görelim.
İlk olarak, bir HTML dosyası oluşturun ve ardından birden çok onay kutusu ve “kimliğine sahip bir düğme oluşturun. aç / kapat ”, işaretlemek veya işaretini kaldırmak için onay kutusunu değiştirir:
< h3 > Tüm onay kutularını işaretlemek veya işaretlerini kaldırmak için düğmeyi tıklayın h3 >< giriş tipi = 'onay kutusu' sınıf = 'onay kutusu' > Beni kontrol et veya işaretini kaldır < br >
< giriş tipi = 'onay kutusu' sınıf = 'onay kutusu' > Beni kontrol et veya işaretini kaldır < br >
< giriş tipi = 'onay kutusu' sınıf = 'onay kutusu' > Beni kontrol et veya işaretini kaldır < br >
< giriş tipi = 'onay kutusu' sınıf = 'onay kutusu' > Beni kontrol et veya işaretini kaldır < br >
< giriş tipi = 'onay kutusu' sınıf = 'onay kutusu' > Beni kontrol et veya işaretini kaldır < br >< br >
< giriş tipi = 'buton' İD = 'geçiş' değer = 'Onay kutularını değiştirmek için tıklayın' >
Karşılık gelen çıktı şöyle olacaktır:
Bundan sonra, bir JavaScript dosyasına veya