2016-12-30 6 views
1
<!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のみを使用します。をクリックしてラジオボタンを選択すると値が変更されますhtml css

+1

いいえ、この場合でもチェックボックスのハックは役に立ちません。そして結局のところ、なぜあなたはそれをやりますか?これは正確な理由(ページの対話性)なぜJavaScriptが発明されているのですか? – sinisake

答えて

2

HTMLとCSSでは使用できません。 HTMLはマークアップ言語であり、CSSはHTMLをスタイリングしています。彼らはイベントベースプログラミングのために何も提供していません。イベントベースのプログラミングにはjquery/javascriptを使用する必要があります。

+0

マークアップ言語はOKですが、ラジオボタンをクリックするたびにラベルタグをクリックするたびに、ラジオボタンをクリックするたびに入力が変更されます –

+0

'for'属性とすべてのフォームの一般的な必要性によって行われます。 – Ahmar

+0

私はIDと入力名を使って同じことをすることができますが、答えが見つかると同じことをします –

0

これは、Htmlでは不可能なjavascriptを使用してのみ行うことができます。 virtual DOMにreactを使用します。あるいは単純なJSやjqueryを使って簡単に行うこともできます。

+0

マークアップ言語はOKですが、ラジオボタンをクリックするたびにラジオをクリックするたびにボタン選択入力を変更する必要があります –

+0

ブラザーバーチャルDOMは名前と​​してReactJsのコンセプトです。これはjs liberaryです.Htmlは静的ラグジュアリーです。一度だけ実行し、Domオブジェクトにイベントを添付します。実行時にそれを自分自身で変更することはできません。あなたが今やっているように、いくつかのjsライブラリやJS自体から助けを得なければなりません。 –

+1

私はIDのと入力名を使用してそれを行うことができます、同じことを私が答えを見つける場合私は試みている –

関連する問題