如何使用JavaScript更改此装饰的广播按钮背景？

Question

JavaScript如何更改输入的CSS属性：检查

html

<div class="switch-field">
        <input id="radio-one" name="switch-one" type="radio" value="22" checked oninput="chng_cube_root(this.value)" />
        <label for="radio-one">Square</label>
        <input id="radio-two" name="switch-one" type="radio" value="33" oninput="chng_cube_root(this.value)" />
        <label for="radio-two">Cube</label>
</div>
<div align="center">
  <label for="fancyswitch" style="border:1px solid black">Switch button bg:</label>
  <input type="color" id="fancyswitch" name="fancyswitch"  value="#90452f" onchange="fancyswitch()"/>
<!-Calling fancyswitch here to change color-->
<div>

css

     .switch-field {
    display:block;
    width:147px;
    margin:auto;
    display: flex;
    overflow: hidden;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    background-color: #e4e4e4;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 1;
    text-align: center;
    padding: 8px 16px;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

 
.switch-field input:checked + label {
    background-color: #018786;
    color:white;
    box-shadow: none;
}

.switch-field label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
    border-radius: 0 4px 4px 0;
}
} 

我想说我想更改其背景颜色 -

js

    function fancyswitch(){
    coloor=document.getElementById("fancyswitch").value;
    document.getElementsByClassName("switch-field input:checked")[0].style.background= coloor;
/*here this is not working*/
    }

现在，我希望当我在html“颜色输入框”中选择颜色时，javaScript将颜色值并将其用于“ RadioButton背景”。

但是我不知道如何针对“ .witch-field输入：检查 +标签”

Answer 1

检查输入是否已检查：

var x = document.getElementById("myCheck").checked;

示例

使用复选框将输入字段中的文本转换为 uppercase ：

假设您有一个输入 id = box in html 。

document.getElementById("box").value = document.getElementById("box").value.toUpperCase();