Toggle beim Drücken in checkbox_wrapper

Ich versuche, das Kontrollkästchen umschalten wann immer wir irgendwo auf der checkbox_wrapper drücken. Hier ist die jsfiddle meiner aktuellen Code jsfiddle.net/hroj0a04/Toggle beim Drücken in checkbox_wrapper

Hier ist der Code:

  .box { 
 
      width: 10%; 
 
      display: inline-block; 
 
      } 
 
      
 
      #wrapper { 
 
      width: 30%; 
 
      border: 5px solid RGB(98,98,98); 
 
\t \t \t position: absolute; 
 
      left: 0; 
 
      right: 0; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
\t \t \t padding-bottom: 2%; 
 
\t \t \t margins: auto; 
 
\t \t \t height: 125px; 
 
      } 
 
\t \t 
 
\t \t #wrapper1 { 
 
      width: 90%; 
 
      border: 5px solid black; 
 
\t \t \t position: absolute; 
 
      left: 0; 
 
      right: 0; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
\t \t \t margins: auto; 
 
\t \t \t margin-top: 2px; 
 
\t \t \t height: 125px; 
 
\t \t \t padding-top: 2px; 
 
\t \t \t padding-bottom: 5%; 
 
\t \t \t pading-left: 2px; 
 
\t \t \t padding-right: px; 
 
      } 
 
      
 
      .checkbox_wrapper { 
 
      font-family: arial, helvetica; 
 
      color: rgb(17, 17, 17); 
 
      padding: 0.2em 10%; 
 
      -moz-border-radius: 8px; 
 
      -webkit-border-radius: 8px; 
 
      border-radius: 8px; 
 
      -webkit-appearance: none; 
 
      border: 1px solid rgb(0, 255, 255); 
 
\t \t \t 
 
\t \t \t margin-top: 2px 
 
      } 
 
\t \t 
 
\t \t 
 
      
 
      .checkbox_wrapper:hover { 
 
      background-color: rgb(89, 89, 89); 
 
      cursor: pointer; 
 
      border: 0px solid rgb(255, 255, 255); 
 
      color: rgb(255, 255, 255); 
 
      } 
 
      
 
      input[type=checkbox], 
 
      input[type=radio] { 
 
      vertical-align: middle; 
 
      position: relative; 
 
      bottom: 1px; 
 
      } 
 
      
 
      #checkboxes, 
 
      #acft_data, 
 
      #time_data { 
 
      margin-top: 0.5em; 
 
      } 
 
      
 
      .center { 
 
      position: absolute; 
 
      left: 0; 
 
      right: 0; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      } 
 
      
 
      input[type=checkbox], 
 
      input[type=radio] { 
 
      vertical-align: middle; 
 
      position: relative; 
 
      bottom: 1px;

<body> 
 
\t <div id="wrapper1" style="text-align:center;"> 
 
\t <div id="wrapper" style="text-align:center;"> 
 
    <div checkboxes> 
 
    <div class="center"> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">1</div> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">2</div> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">3</div> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div checkboxes> 
 
    <div class="center"> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">1</div> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">2</div> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">3</div> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div checkboxes> 
 
    <div class="center"> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">1</div> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">2</div> 
 
     <div class="checkbox_wrapper box"> 
 
     <input type="checkbox">3</div> 
 
    </div> 
 
    </div> 
 
\t </div> 
 
\t </div> 
 

 
</body>

Ist es möglich, es zu tun, ohne zu viel Arbeit oder nicht? Jeder Vorschlag wird sehr geschätzt. Vielen Dank und einen schönen Tag

HINWEIS: Ich weiß, das ist kein schöner Code. Ich habe damit angefangen und muss immer noch mit anderen Dingen herumspielen, wie zum Beispiel dem Checkbox-Rand.

Quelle

2017-05-09 MIchel Georges Najarian

Verwenden Sie das Label-Element für checkbox-wrapper anstelle von divs. Dann sollte es aus der Box funktionieren.

.box { 
 
      width: 10%; 
 
      display: inline-block; 
 
      } 
 
      
 
      #wrapper { 
 
      width: 30%; 
 
      border: 5px solid RGB(98,98,98); 
 
\t \t \t position: absolute; 
 
      left: 0; 
 
      right: 0; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
\t \t \t padding-bottom: 2%; 
 
\t \t \t margins: auto; 
 
\t \t \t height: 125px; 
 
      } 
 
\t \t 
 
\t \t #wrapper1 { 
 
      width: 90%; 
 
      border: 5px solid black; 
 
\t \t \t position: absolute; 
 
      left: 0; 
 
      right: 0; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
\t \t \t margins: auto; 
 
\t \t \t margin-top: 2px; 
 
\t \t \t height: 125px; 
 
\t \t \t padding-top: 2px; 
 
\t \t \t padding-bottom: 5%; 
 
\t \t \t pading-left: 2px; 
 
\t \t \t padding-right: px; 
 
      } 
 
      
 
      .checkbox_wrapper { 
 
      font-family: arial, helvetica; 
 
      color: rgb(17, 17, 17); 
 
      padding: 0.2em 10%; 
 
      -moz-border-radius: 8px; 
 
      -webkit-border-radius: 8px; 
 
      border-radius: 8px; 
 
      -webkit-appearance: none; 
 
      border: 1px solid rgb(0, 255, 255); 
 
\t \t \t 
 
\t \t \t margin-top: 2px 
 
      } 
 
\t \t 
 
\t \t 
 
      
 
      .checkbox_wrapper:hover { 
 
      background-color: rgb(89, 89, 89); 
 
      cursor: pointer; 
 
      border: 0px solid rgb(255, 255, 255); 
 
      color: rgb(255, 255, 255); 
 
      } 
 
      
 
      input[type=checkbox], 
 
      input[type=radio] { 
 
      vertical-align: middle; 
 
      position: relative; 
 
      bottom: 1px; 
 
      } 
 
      
 
      #checkboxes, 
 
      #acft_data, 
 
      #time_data { 
 
      margin-top: 0.5em; 
 
      } 
 
      
 
      .center { 
 
      position: absolute; 
 
      left: 0; 
 
      right: 0; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      } 
 
      
 
      input[type=checkbox], 
 
      input[type=radio] { 
 
      vertical-align: middle; 
 
      position: relative; 
 
      bottom: 1px;

<div id="wrapper1" style="text-align:center;"> 
 
    <div id="wrapper" style="text-align:center;"> 
 
    <div checkboxes> 
 
     <div class="center"> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">1</label> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">2</label> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">3</label> 
 
     </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div checkboxes> 
 
     <div class="center"> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">1</label> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">2</label> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">3</label> 
 
     </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div checkboxes> 
 
     <div class="center"> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">1</label> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">2</label> 
 
     <label class="checkbox_wrapper box"> 
 
       <input type="checkbox">3</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-05-09 14:14:57

Dank. Ausgezeichnet ausgearbeitet. Einen schönen Tag noch! –

Großartig! Ich würde mich freuen, wenn Sie es dann als die richtige Antwort markieren. –

sagt mir, dass ich 2 Minuten warten soll. Ich habe seit dem letzten EDIT versucht, noch 1 Minute zu warten (ich denke, wir müssen 10 Minuten warten) –

Toggle beim Drücken in checkbox_wrapper

Antwort

Verwandte Themen