在複選框內設置文本

嗨，是否可以添加複選框內的文本替換刻度圖標。在複選框內設置文本

我不能使用此代碼實現它可能有人建議我如何使文本尺寸選擇框裏面

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

幫我帶出這種類型的UI

的

來源

2017-06-01 Yokesh Varadhan

更新

檢查更新演示here

添加下面的JS來獲得相關的單選值

JS：

$("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")); 
});

我假設用戶一次只能選擇一種尺寸。如果用戶可以選擇多個大小，請使用複選框修改示例。

試試這個

檢查演示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; 
}

來源

2017-06-01 05:53:02

任何想法如何，每次任何一個尺寸後，拿到了相關的值到控制檯已被選中 –

@YokeshVaradhan請檢查upd答覆。我希望這能幫到您。 –

您可以隱藏input並使用label選中該複選框。然後使用:not(:checked)和:checked選擇器在下面的示例中設置標籤的樣式。 radio按鈕可以應用相同的邏輯。

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>

來源

2017-06-01 05:41:22

在複選框內設置文本

回答

相關問題