2

ラジオ ボタンに画像を追加するにはどうすればよいですか? ラジオボタン自体をなくして、画像に置き換えてほしい。また、画像をクリックすると、質問ごとに反転または暗くなり、ユーザーがどの画像が選択されているかがわかるようにするにはどうすればよいですか?

<!DOCTYPE html>
<html>
<head>


</head>
<body>

<script>
function tryToMakeLink()
{
    //get all selected radios
    var q1=document.querySelector('input[name="q1"]:checked');
    var q2=document.querySelector('input[name="q2"]:checked');
    var q3=document.querySelector('input[name="q3"]:checked');
    //make sure the user has selected all 3
    if (q1==null || q2==null ||q3==null)
    {
        document.getElementById("linkDiv").innerHTML="--";
    }
    else
    {
        //now we know we have 3 radios, so get their values
        q1=q1.value;
        q2=q2.value;
        q3=q3.value;
        //now check the values to display a different link for the desired     
configuration
        if (q1=="AT&T" && q2=="8GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>att 8gb black</a>";
        }
        else if (q1=="Other" && q2=="8GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>other 8b 
white</a>";
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>another     
option</a>";
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>oops</a>";
        }
        else if (q1=="AT&T" && q2=="8GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>can't</a>";
        }
        else if (q1=="Other" && q2=="8GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>yours</a>";
        }
        else if (q1=="Other" && q2=="16GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>mines</a>";
        }
        else if (q1=="Other" && q2=="16GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>what</a>";
        }
        else if (q1=="Unlocked" && q2=="8GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>red</a>";
        }
        else if (q1=="Unlocked" && q2=="8GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>orange</a>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>green</a>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<a href=#>blue</a>";
        }
    }
}
</script>

<form name="quiz" id='quiz'>

What carrier do you have?
<ul style="margin-top: 1pt">
    <li><input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T"/>AT&T</li>
    <li><input type="radio" onclick=tryToMakeLink(); name="q1"  
value="Other"/>Other</li>
    <li><input type="radio" onclick=tryToMakeLink(); name="q1" 
value="Unlocked"/>Unlocked</li>
</ul>

What is your phones capicity?
<ul style="margin-top: 1pt">
    <li><input type="radio" onclick=tryToMakeLink(); name="q2" value="8GB"/>8GB</li>
    <li><input type="radio" onclick=tryToMakeLink(); name="q2" value="16GB"/>16GB</li>
</ul>

What color is your phone?
<ul style="margin-top: 1pt">
    <li><input type="radio" onclick=tryToMakeLink(); name="q3" 
value="Black"/>Black</li>
    <li><input type="radio" onclick=tryToMakeLink(); name="q3" 
value="White"/>White</li>
</ul>

<br>
<div id=linkDiv>
 ---
</div>
</form>
</body>

4

1 に答える 1

0

ラジオ ボタンの画像に対する適切な解決策として、ここに良い質問があります: 画像を使用してラジオ ボタンの スタイルを設定するにはどうすればよいですか?

質問の 2 番目の部分では、CSS3 フィルター効果を使用したいと考えていますが、それらはまだ広く利用できません。当面は、代わりに画像の周囲に枠線を使用することを検討してください。したがって、マウスクリックで、5px の赤い境界線、または目立つ何かを付けます。

さらに、入力タグでは、タグに onclick を配置しないことをお勧めします。代わりに、次のような js を試してください。

var inputs = document.querySelectorAll("input[type=radio]");
inputs.onClick = function(){...}

あなたのコードは少しきれいに見えるでしょう。

于 2013-08-25T01:37:22.893 に答える