Wątek przeniesiony 2022-03-04 20:47 z JavaScript przez Riddle.

Pojawianie się diva po wciśnięciu checkboxa

0

Chce zrobić konfigurator, ale mam problem ze zrobieniem pojawiającego się diva po naciśnięciu checkboxa poniżej kod html

<!DOCTYPE HTML>
<html lang="pl">
<head>
 
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     
    <title>Konfigurator usług</title>
     
    <meta name="description" content="Konfigurator usług" />
    <meta name="keywords" content="Cyber Grota, Internet, Telewizja" />
     
    <link href="main3.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
     
    <link href="css/fontello.css" rel="stylesheet" type="text/css" />
     
</head>
 
<body>
 
    <div class="wrapper">
        <div class="header">
         
            <div class="logo">
                <span style="color: #c34f4f">Konf</span>igurator usług
                <div style="clear:both;"></div>
            </div>
        </div>
        <div class="nav">
            <ol>
                <li><a href="#">Strona główna</a></li>
                <li><a href="#">Konfigurator</a></li>
                <li><a href="#">Ważne informacje</a></li>
                <li><a href="#">Telewizja</a></li>
                <li><a href="#">Internet</a><li>
				<a href="#">Kontakt</a></li>
            </ol>
         
        </div>
         
        <div class="content">
		<div class="rectangle">&nbsp;&nbsp;&nbsp;
    Wybór miasta/ulicy<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="Miasto" id="veg1" value="Będzin ul. 1" onclick="return ValidateSelection();">
    <label for="veg1">Będzin ul. 1</label>&nbsp;&nbsp;&nbsp;
    <input form="myForm" type="checkbox" name="Miasto" id="veg2"  value="Będzin ul. 2" onclick="return ValidateSelection();"> 
    <label for="veg2">Będzin ul. 2</label>&nbsp;&nbsp;&nbsp;
    <input form="myForm" type="checkbox" name="Miasto" id="veg3"  value="Będzin ul. 3" onclick="return ValidateSelection();"> 
    <label for="veg3">Będzin ul. 3</label>&nbsp;&nbsp;&nbsp;
    <input type="checkbox" name="Miasto" id="veg4" value="Będzin ul. 4" onclick="return ValidateSelection();"> 
    <label for="veg4">Będzin ul. 4</label>&nbsp;&nbsp;&nbsp;
	<input type="checkbox" name="Miasto" id="veg5" value="Czeladź ul. 1" onclick="return ValidateSelection();"> 
    <label for="veg5">Czeladź ul. 1</label>&nbsp;&nbsp;&nbsp;
	<input type="checkbox" name="Miasto" id="veg6" value="Czeladź ul. 2" onclick="return ValidateSelection();"> 
    <label for="veg6">Czeladź ul. 2</label></div>
           
        </div>
         
      
         
        <div class="footer">Cyber grota</div>
    </div>
     
    <script src="jquery-1.11.3.min.js"></script>
     
<script type="text/javascript">  
    function ValidateSelection()  
    {  
        var cb = document.getElementsByName("Miasto");  
        var CheckedItems = 0; 
        for(var i = 0; i < cb.length; i++)  
        {  
            if(cb[i].checked)  
                CheckedItems++;  
        }  
        if(CheckedItems > 1){  
            alert("wybierz jedno");  
            return false;}  
}  
 </script>
     
</body>
</html>
1

Nie mógłbyś użyć <input type="radio"/> , jeśli zawsze ma być tylko jeden wybrany element?

PS: Nie używaj &nbsp;, tylko użyj margin, padding albo display odpowiednio.

1 użytkowników online, w tym zalogowanych: 0, gości: 1