Heim > Artikel > Web-Frontend > Das Mehrfachauswahlfeld input:checkbox erzielt den gleichen Einzelauswahleffekt wie Radio

Das Mehrfachauswahlfeld input:checkbox erzielt den gleichen Einzelauswahleffekt wie Radio

高洛峰Original: 2018-05-17 17:04:282712Durchsuche

Ich bin kürzlich auf ein kleines Problem gestoßen, das heißt, wenn wir das Einzelauswahl-Radio verwenden, stellen wir fest, dass wir nach der Auswahl keines mehr auswählen können, das heißt, es gibt nach der Auswahl keine Abbruchfunktion Ich habe an das leistungsstarke Kontrollkästchen gedacht, aber es gibt mehrere Auswahlmöglichkeiten. Der Effekt ist der gleiche wie bei Radio. Der Code ist sehr einfach, nur vier Zeilen.
Kein Unsinn mehr, nur Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery-1.8.3.min.js" type="text/javascript" language="javascript"></script> 
<title>无标题文档</title> 
<script type="text/javascript"> 
$(function(){ 
$(":checkbox").click(function(){ 
if($(this).attr("checked")!=undefined) 
{ 
$(this).siblings().attr("checked",false); 
$(this).attr("checked",true); 
} 
}); 
}); 
</script> 
<style> 
span,input{float:left;} 
input{ width:14px; height:14px;} 
span{ margin-right:20px;} 
</style> 
</head> 

<body> 
<p> 
<input type="checkbox" /><span>1</span> 
<input type="checkbox" /><span>2</span> 
<input type="checkbox" /><span>3</span> 
<input type="checkbox" /><span>4</span> 
<input type="checkbox" /><span>5</span> 
<input type="checkbox" /><span>6</span> 
<input type="text" /><span>7</span> 
</p> 
</body> 
</html>

Weitere Eingaben: Kontrollkästchen mit Mehrfachauswahl, um den gleichen Einzelauswahleffekt wie bei Radio zu erzielen. Beachten Sie für verwandte Artikel bitte die PHP-Chinese-Website !

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Alles, was Sie darüber wissen möchten, finden Sie hierNächster Artikel：Alles, was Sie darüber wissen möchten, finden Sie hier

In Verbindung stehende Artikel

Mehr sehen