AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Checkbox en html

Checkbox en html  posté le :
Bonjour,
Je suis élève de la spé ISN et j'ai un projet en html à faire.
Mon projet est de faire une carte qui localise quelques festivals bretons. Sauf que je bloque sur un truc : comment faire pour "relier" un bouton à une action ?
Pour faire simple, j'ai 4 checkbox et j'aimerais que quand je coche sur une checkbox il n'y ait qu'un seul marqueur sur la carte à apparaître.
J'ai regardé beaucoup de tutoriels et je bloque complètement !
Voici mon fichier html :
Code:
<!DOCTYPE html>
<html>
<head>

 <title>Les festivals de Bretagne</title>

 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
 <link rel="stylesheet" href="new1.css"


</head>
<body>



<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

 var mymap = L.map('mapid').setView([51.505, -0.09], 9);

 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
 maxZoom: 18,
 attribution: 'Map data ©️ <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
 'Imagery ©️ <a href="http://mapbox.com">Mapbox</a>',
 id: 'mapbox.streets'
 }).addTo(mymap);



 L.marker([48.071907, -2.970858]).addTo(mymap)
 .bindPopup("<b>En Voie d'Expression</b><br />Du 23 au 25 septembre <br /> <a href='http://www.lesartsouillessouvrent.fr/eve/' target='blank'>Lien du site </a> ").openPopup();
 L.circle([48.071907, -2.970858], 500, {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5
 }).addTo(mymap);

 L.marker([48.226602, -2.854278]).addTo(mymap)
 .bindPopup("<b>Thélokalizé</b><br />Du 24 au 25 août <br />  <a href='http://thelokalize.fr/' target='blank'>Lien du site </a> ").openPopup();
 L.circle([48.226602, -2.854278], 500, {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5
 }).addTo(mymap);

 L.marker([48.270911, -3.551588]).addTo(mymap)
 .bindPopup("<b>Vieilles Charrues</b><br />Du 19 au 22 juillet <br />  <a href='https://www.vieillescharrues.asso.fr/' target='blank'>Lien du site </a> ").openPopup();
 L.circle([48.270911, -3.551588], 500, {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5
 }).addTo(mymap);

 L.marker([47.817938, -2.375193]).addTo(mymap)
 .bindPopup("<b>Au Pont du Rock</b><br />Du 3 au 4 août <br />  <a href='http://www.aupontdurock.com/' target='blank'>Lien du site </a> ").openPopup();
 L.circle([47.817938, -2.375193], 500, {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5
 }).addTo(mymap);

 L.marker([48.567762, -1.926298]).addTo(mymap)
 .bindPopup("<b>La Route du Rock</b><br />Du 16 au 19 août <br />  <a href='http://www.laroutedurock.com/' target='blank'>Lien du site </a> ").openPopup();
 L.circle([48.567762, -1.926298], 500, {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5
 }).addTo(mymap);









 var popup = L.popup();

 function onMapClick(e) {
 popup
 .setLatLng(e.latlng)
 .setContent("You clicked the map at " + e.latlng.toString())
 .openOn(mymap);
 }

 mymap.on('click', onMapClick);

</script>





<span>
<input type="checkbox" id="c1" name="cc" checked/>
    <label for="c1"><span></span>En voie d'Expression</label>
    <p>
    <input type="checkbox" id="c2" name="cc" checked/>
    <label for="c2"><span></span>Thélokalizé</label>
    <p>
    <input type="checkbox" id="c3" name="cc" checked/>
    <label for="c3"><span></span>Vieilles Charrues</label>
    <p>
    <input type="checkbox" id="c4" name="cc" checked/>
    <label for="c4"><span></span>La route du rock</label>
 </br>
 </br>
 <button onclick="map1()">Rechercher</button>

</span>


</body>
</html>

Et voici le fichier css :
Code:
body {
    font-family: Arial, sans-serif;
    position:relative;
    background:#40464b;
    height:100%;
    padding:40px 30%;
    margin:0;
}

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    color:#f2f2f2;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"]:checked + label span {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -19px top no-repeat;
}

input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
}

input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

input[type="radio"]:checked + label span {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat;
}


J'ai vraiment besoin d'aide, ce serait super gentil de répondre
Merci beaucoup,
aymee
avatar
Codeur présenté
Messages : 1
Coda'Points : 2
Date d'inscription : 03/05/2018

Re: Checkbox en html  posté le :
Salut aymee,

Désolé mais le forum n'est plus maintenu... Nous ne serons pas en mesure de t'aider.
Eluknow
avatar
Administrateur
Messages : 2199
Coda'Points : 3915
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: L'entraide dans cet univers :: Besoin d'aide ? :: SOS - code-
Sauter vers: