Question

0

122

Views

How to change this decorated radio button background using Javascript?

How can Javascript change CSS properties of input:checked

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

Lets say I want to change its background color-

JS

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

Now I want that when i choose color in html "color input box " , Javascript take the color value and use it for that 'Radiobutton background'.

But i don't know how to target the " .switch-field input:checked + label "

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-01T00:24:45.687Z

To check whether the input is checked or not:

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

Example

Use a checkbox to convert text in an input field to uppercase:

Assuming you have an input with id=box in your html.

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