Setzen Sie Text in ein Kontrollkästchen

Question

Hallo ist es möglich, Text innerhalb Kontrollkästchen zu ersetzen das Häkchen-Symbol.

Ich bin es nicht erreichen konnte mit diesem Code könnte mir jemand vorschlagen, wie eine Größe Auswahlbox mit einem Text machen Inneren

<ion-col> 
     <p>Choose the size</p> 
     <ion-item> 
      <ion-checkbox >S</ion-checkbox> 
     </ion-item>  
    </ion-col> 

mir Hilfe dieser Art von UI

Answer 1

Aktualisiert

Check aktualisiert Demo here

den folgenden Js Fügen Sie die entsprechenden Funk Wert

JS zu erhalten:

$("body").on("click", "label", function(e) { 
    var getValue = $(this).attr("for"); 
    var goToParent = $(this).parents(".select-size"); 
    var getInputRadio = goToParent.find("input[id = " + getValue + "]"); 
    console.log(getInputRadio.attr("id")); 
}); 

Ich nehme an, dass der Benutzer nur eine Größe gleichzeitig auswählt. Wenn der Benutzer die Mehrfachgröße auswählen kann, ändern Sie das Beispiel mit der Checkbox.

Versuchen Sie, diese

prüfen Demo here

HTML:

<div class="select-size"> 
    <input type="radio" name="s-size" id="small" checked/> 
    <input type="radio" name="s-size" id="medium" /> 
    <input type="radio" name="s-size" id="large" /> 
    <input type="radio" name="s-size" id="x-large" /> 
    <input type="radio" name="s-size" id="xx-large" /> 

    <label for="small">S</label> 
    <label for="medium">M</label> 
    <label for="large">L</label> 
    <label for="x-large">XL</label> 
    <label for="xx-large">XXL</label> 

</div> 

CSS:

.select-size input{ 
    display: none; 
} 

label { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    text-align: center; 
    border: 1px solid #ddd; 
    line-height: 50px; 
    cursor: pointer 
} 

#small:checked ~ label[for="small"], 
#medium:checked ~ label[for="medium"], 
#large:checked ~ label[for="large"], 
#x-large:checked ~ label[for="x-large"], 
#xx-large:checked ~ label[for="xx-large"] { 
    background: #999; 
    color: #ffffff; 
} 

Answer 2

zu bringen, Sie können die input ausblenden und die label verwenden, um das Kontrollkästchen zu aktivieren. Dann stylen Sie Ihr Etikett wie im folgenden Beispiel mit den Selektoren :not(:checked) und :checked. Die gleiche Logik kann auf radio Schaltflächen angewendet werden.

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    clear: both; 
 
} 
 

 
li{ 
 
    list-style-type: none; 
 
    list-style-position: outside; 
 
    padding: 10px; 
 
    float: left; 
 
} 
 

 
input[type="checkbox"]:not(:checked), 
 
input[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999%; 
 
} 
 

 
input[type="checkbox"] + label { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    border: 1px solid black; 
 
    color: black; 
 
    background-color: white; 
 
    margin-bottom: 10px; 
 
} 
 

 
input[type="checkbox"]:checked + label { 
 
    border: 1px solid white; 
 
    color: white; 
 
    background-color: black; 
 
}

<ul> 
 
    <li> 
 
    <input type="checkbox" id="check_1" name="check_1" value="check_1"> 
 
    <label for="check_1">S</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="check_2" name="check_2" value="check_2"> 
 
    <label for="check_2">M</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="check_3" name="check_3" value="check_3"> 
 
    <label for="check_3">L</label> 
 
    </li> 
 
    <li> 
 
    <input type="checkbox" id="check_4" name="check_4" value="check_4"> 
 
    <label for="check_4">XL</label> 
 
    </li> 
 
</ul>