在复选框内设置文本

Question

您好可以在复选框内添加文本替换勾选图标。

我无法用这段代码实现它可以有人建议我如何制作一个带有文字的尺寸选择框

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

帮助我推出这种类型的用户界面

Answer 1

您可以隐藏input并使用label选中该复选框。然后使用:not(:checked)和:checked选择器为您的标签设置样式，如下例所示。相同的逻辑可以应用于radio按钮。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<强>更新

检查更新的演示here

添加以下J以获取相关的无线电值

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;
}