单击单选按钮更改选择值仅html css

时间:2016-12-30 09:41:29

标签: html html5 forms validation dom

<!DOCTYPE html>
<html>
<body>
    <form action="" id="carform" name="radioForm">
        <input type="radio" name="fname" id="Volvo:" value="volvo">
        <label for="Volvo:">Volvo:</label>
        <input type="radio" name="fname" id="Saab:" value="saab">
        <label for="Saab:">Saab:</label>
        <input type="radio" name="fname" id="Opel:" value="opel">
        <label for="Opel:">Opel:</label>
        <input type="radio" name="fname" id="Audi:" value="audi">
        <label for="Audi:">Audi:</label>
        <br/>
        <select  form="carform" id="select">
            <option name="fname" value="volvo">Volvo</option>
            <option name="fname" value="saab">Saab</option>
            <option name="fname" value="opel">Opel</option>
            <option name="fname" value="audi">Audi</option>
        </select>
        <br><br>
        <input type="submit" />
    </form>
<script>
var rad = document.radioForm.fname;
var prev = null;
for(var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        if(this !== prev) {
            prev = this;
        }
        console.log(this.value);
        document.getElementById('select').value=this.value;
    };
}
</script>   
</body>
</html>

每当我点击radio button输入类型时,选择值都在变化,这是我用javascript完成的。没有javascript,jquery和所有人可以帮助我做同样的事吗?仅使用html,css。

2 个答案:

答案 0 :(得分:2)

HTML和CSS无法实现。 HTML是一种标记语言,CSS是HTML的样式。他们没有为事件基础编程提供任何东西。您需要使用jquery / javascript进行事件库编程。

答案 1 :(得分:0)

你只能使用Html无法实现的javascript。使用react for virtual DOM。或者你可以简单地使用简单的JS或jquery来完成它。