更改用于检查单选按钮的标签文本//我的单选html很奇怪

Question

您好，我正在尝试根据选中的标签来更改标签文本。我在网上找到的这些单选按钮也使用了一些奇怪的html，以使其非常可定制，但是每次我尝试删除对它无用的标签时，它将删除所有对收音机的自定义设置，有时甚至完全删除了收音机。可以使用更好的html，css和js的任何示例来使这些单选按钮更好，并在选中时更改我想要的标签文本。

这是我的单选按钮代码：

$(function(){
    $(".check-item").change(function(){
       var labeltext = this.checked ? 'Item Code' : 'Keyword';
       $("#inputs").append(labeltext);

    });
});

.radio {
    display: block;
    position: absolute;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* hide the browser's default radio button */
.radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* create custom radio */
.check-item, .check-keyword {
  position: absolute;
  top: 590%;
  height: 23px;
    width: 23px;
    background-color: transparent;
    border: 1px solid #bf0d33;
    border-radius: 50%;

}
.check-item {
    left: 90%;
}
.check-keyword {
    left: 250%;
}
#item-code-label {
  position: absolute;
  top: 22%;
  left: 2.55%;
  color: #bf0d33;
  font-size:8pt;
}
#keyword-label {
  position: absolute;
  top: 22%;
  left: 8.65%;
  color: #bf0d33;
  font-size:8pt;
}
/* add background color when the radio is checked */
input:checked ~ .check-item, input:checked ~ .check-keyword {
    background-color: #bf0d33;
    border:none;
}

/* create the radio and hide when not checked */
.check-item:after, .check-keyword:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the radio when checked */
input:checked ~ .check-item:after, .radio input:checked ~ 
.check-keyword:after {
    display: block;
}

/* radio style */
.check-item:after, .check-keyword:after {
    top: 8px;
    left: 32%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="item-code-label">Item Code</label>
    <!-- idk what happened here -->
    <label class="radio">.
    <input type="radio" checked="checked" name="radio">
    <span class="check-item"></span>
</label>
<label id="keyword-label">Keyword</label>
<label class="radio">.
    <input class="radio" type="radio" name="radio">
    <span class="check-keyword"></span>
</label>

这是我的html页面上的单选按钮的外观：

任何帮助都很重要

我想添加标签名称为“ item-input”的标签，因为我已经为其自定义设置了一些CSS：

label[for="color-input"], label[for="sizes-item"], label[for="item-input"] {
    position: absolute;
    top: 21.5%;
    color: #bf0d33;
}