Jump to content

Html - Css | Checkbox Ve Radio Buton Görevi


Recommended Posts

Arkadaşlar işaretlenmiş radio butonun işaretini ikinci bir tıklamayla nasıl kaldırabilirim. Bu mümkün değilse checkbox'a radio buton gibi nasıl görev verebilirim. Çünkü checkbox işaretlenip işaret kaldırılabiliyor.

 

Html

<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek1-1" value="A">
	<label for="secenek1-1">A)</label>
</div>
<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek2-1" value="B">
	<label for="secenek2-1">B)</label>
</div>
<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek3-1" value="C">
	<label for="secenek3-1">C)</label>
</div>
<div class="SecenekIsaret">
	<input type="radio" name="cevap-1" id="secenek4-1" value="D">
	<label for="secenek4-1">D)</label>
</div>

Css

.SecenekIsaret { 
	position: relative; 
}
  
.SecenekIsaret label {
	cursor: pointer;
}
    
.SecenekIsaret label:before {
	content: '✖️';  
	font-size: 16px;
	background: #c0c0c0;
	border-radius: 50%;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-right: 10px;
	font-weight:bold;
	color: gray;
}
 
.SecenekIsaret input {
	display: none;
}

.SecenekIsaret input[type=radio]:not(.hide):checked + label:before { 
	background: green;
	content: "✔";  
	color: #fff;
}
Edited by Abdullah 37
Link to comment
Share on other sites

çift tıklama ile neden kaldırmak istiyorsunki baska sıka tıklayınca diğeri iptal oluyor zaten

 

Kişi sorunun cevabını işaretledikten sonra işaretlemekten vazgeçerse diye böyle bir şeye gerek duydum.


 

Hocam oradaki kodları açıklayabilir misiniz? Ne ne yapıyor mantığını kavramak için.

Ben oradakileri aynen kopyaladım ama çalıştıramadım.

Edited by Abdullah 37
Link to comment
Share on other sites

Kişi sorunun cevabını işaretledikten sonra işaretlemekten vazgeçerse diye böyle bir şeye gerek duydum.


 

Hocam oradaki kodları açıklayabilir misiniz? Ne ne yapıyor mantığını kavramak için.

Ben oradakileri aynen kopyaladım ama çalıştıramadım.

senin yapmak istediğini anlatıyor işte.

Bir tane örnek hazırladım buradan basit bir şekilde anlayıp yaparsın.

giphy.gif

<html>
<body>
<head>


</head>
<h1> Grup 1 </h1>
A <input type="checkbox" name="group1[]" />
B <input type="checkbox" name="group1[]" />
C <input type="checkbox" name="group1[]" />
<h1> Grup 2 </h1>
A<input type="checkbox" name="group2[]" />
B<input type="checkbox" name="group2[]" />
C<input type="checkbox" name="group2[]" />
<h1> Grup 3 </h1>
A <input type="checkbox" name="group3[]" />
B <input type="checkbox" name="group3[]" />
C <input type="checkbox" name="group3[]" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
</script>
</body>
</html> 
Edited by WolfmanTR_
Link to comment
Share on other sites

senin yapmak istediğini anlatıyor işte.
Bir tane örnek hazırladım buradan basit bir şekilde anlayıp yaparsın.

 
Teşekkür ederim WolfmanTR.
 
- İnputlarda bulunan " [ ] " işaret neyi ifade ediyor, görevi nedir?

<input type="checkbox" name="group1[]" />

- Javascript fonksiyonu sadece sayfa altına alındığında checkboxlar istediğim şekilde görevini yapıyor, bunun nedeni nedir, head tagı içine alınca çalışması mümkün değil mi?
 
- İnputtan gelen değer array olarak dönüyor. Gelen değeri nasıl yazdırabilirim.
 

jV6m8n.png

 

Hocam dosyamı buraya ekliyorum bir bakar mısın?

http://www.mediafire.com/download/hbp0mc6mgx6a5oj/testsistem.zip

Edited by Abdullah 37
Link to comment
Share on other sites

 
Teşekkür ederim WolfmanTR.
 
- İnputlarda bulunan " [ ] " işaret neyi ifade ediyor, görevi nedir?

<input type="checkbox" name="group1[]" />

- Javascript fonksiyonu sadece sayfa altına alındığında checkboxlar istediğim şekilde görevini yapıyor, bunun nedeni nedir, head tagı içine alınca çalışması mümkün değil mi?
 
- İnputtan gelen değer array olarak dönüyor. Gelen değeri nasıl yazdırabilirim.
 

jV6m8n.png

 

Hocam dosyamı buraya ekliyorum bir bakar mısın?

http://www.mediafire.com/download/hbp0mc6mgx6a5oj/testsistem.zip

dizi olayını bende bilmiyorum ama şıklara radio koyup şöyle birşey yapabilirsin.

<button onclick="document.getElementById('secenek2-1').checked = false;  ">sil</button>

id'si secenek2-1 olan radionun işaretini kaldırır.

 

veya 

<script>function uc-S1()
 {
  document.getElementById('secenek1-1').checked = false;
  document.getElementById('secenek1-2').checked = false;
  document.getElementById('secenek1-3').checked = false;
  document.getElementById('secenek1-4').checked = false;      
 }
</script>

<a class="kaldir" onclick="uc-S1()"> X </a>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...