如何用图像替换单选按钮

时间：2013-08-25 16:43:36

标签： javascript html

如何修复此代码以便显示图像。他们没有出现过单选按钮的位置。我在不同的场合尝试了几种不同的方法，这似乎是最有希望的，但我似乎无法使图像出现在应有的位置。请不要告诉我这回答了多少次，因为你不知道我给了他们多少次尝试。我只想帮助用javascript取代单选按钮的图像。请使用jsfiddle作为示例。我可能会丢失标签，但我不知道放在哪里。 http://jsfiddle.net/uuyAq/ 

<!DOCTYPE html>
<html>
<head>
        <script>

    var images = {
1: 'http://wepriceit.webs.com/ipad-5-image.jpg',
2: 'http://wepriceit.webs.com/ipad-5-image.jpg',
3: 'http://wepriceit.webs.com/ipad-5-image.jpg',
4: 'http://wepriceit.webs.com/ipad-5-image.jpg',
5: 'http://wepriceit.webs.com/ipad-5-image.jpg'
};

$('input[type=radio][name^=question]').each(function() {
var id = this.id;
$(this)
      .hide()  // hide the radio button
      .after('<img src="'+ images[id] +'">'); // insert the image 
                                              // after corresponding radio
});

</script>
</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="<input type=button 
disabled=disabled value=Next>";
    }
    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="<input type=button value=Next  
onclick=\"window.location.href='http://google.com/';\">att 8gb black</input>";
        }
        else if (q1=="Other" && q2=="8GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://yahoo.com/';\">other 8b white</input>";
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://bing.com/';\">another option</input>";
        }
        else if (q1=="AT&T" && q2=="16GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
        }
        else if (q1=="AT&T" && q2=="8GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
        }
        else if (q1=="Other" && q2=="8GB" && q3=="Black")
        {
          document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://images.google.com/';\">yours</input>";
        }
        else if (q1=="Other" && q2=="16GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://youtube.com/';\">mines</input>";
        }
        else if (q1=="Other" && q2=="16GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://docs.google.com/';\">what</input>";
        }
        else if (q1=="Unlocked" && q2=="8GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
        }
        else if (q1=="Unlocked" && q2=="8GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://webs.com/';\">orange</input>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="White")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
        }
        else if (q1=="Unlocked" && q2=="16GB" && q3=="Black")
        {
            document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
        }
    }
}
</script>

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


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

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

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



<br>
<div id=linkDiv>
 <input type=button disabled=disabled value=Next>
</div>
</form>
</body>
</html>

http://jsfiddle.net/uuyAq/

3 个答案:

答案 0 :(得分：1)

您的选择器$('input[type=radio][name^=question]')会查找名称以“问题”开头的复选框，但该表单包含名称为q1，q2 ...

的元素

答案 1 :(得分：1)

你为什么使用Javascript？有一个纯粹的CSS解决方案！

第一步 - HTML：

<input type="radio" class="radio" name="radio" id="radio"> <label for="radio">Option</label>

第二步 - CSS：

/* visually hide the default radio button */
.radio {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* make the label relative, add padding to the left for adding the custom radio button */
.radio + label {
    padding-left: 23px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 24px;
    margin: 8px 0;
}

/* :before will be our new button! */

.radio + label:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition(background 250ms ease-in-out);
    -moz-transition(background 250ms ease-in-out);
    -o-transition(background 250ms ease-in-out);
    transition(background 250ms ease-in-out);

    /* Your size */
    width: 10px;
    height: 10px;
    /* This should be: 0 - (height / 2) */
    margin-top: -5px;
    /* Your default background color */
    background: #f97e76;
}

.radio:checked + label:before {
    /* Your checked background color */
    background: #a8bd44;
}

认为它是很多CSS，但它比使用Javascript更好的解决方案。

这是一个jsfiddle：http://jsfiddle.net/ninty9notout/GsSvF/

无耻的自我插件 - 这是我使用纯CSS制作的页面来改变收音机和复选框的外观：http://hieroishere.com/flatui/

此方法使用伪元素。你可以阅读它们：

在CSS Play上：http://css-tricks.com/pseudo-element-roundup/

在MDN上：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

享受：）

答案 2 :(得分：0)

我只是用Google搜索，发现了这个：http://so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/这是对类似问题的回答。

JS / JQ：

    $(function () {
    $('input:radio').hide().each(function () {
        var label = $("label[for=" + '"' + this.id + '"' + "]").text();
        $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '') + ' class="radio-fx ' + this.name + '" href="#"><span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
    });
    $('.radio-fx').on('click', function (e) {
        $check = $(this).prev('input:radio');
        var unique = '.' + this.className.split(' ')[1] + ' span';
        $(unique).attr('class', 'radio');
        $(this).find('span').attr('class', 'radio-checked');
        $check.attr('checked', true);
    }).on('keydown', function (e) {
        if ((e.keyCode ? e.keyCode : e.which) == 32) {
            $(this).trigger('click');
        }
    });
    /* not needed just for sake ;)*/
    $('#form').submit(function () {
        var posts = $(this).serialize();
        if (posts != '') {
            alert(posts);
        } else {
            alert('please select something, then submit the form!');
        }
        return false;
    });
    $('#change-skin').change(function () {
        $('form table').attr('id', this.value);
    });
});

CSS：

   body {
        font-family: Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
        text-align: center
    }
    form {
        text-align: left;
        width: 310px;
        margin: 20px auto
    }
    a.radio-fx span, a.radio-fx {
        display: inline-block;
        margin: 0;
        padding: 0;
        border: 0;
    }
    #skin_1 .radio, #skin_1 .radio-checked, #skin_1 a.radio-fx {
        width: 32px;
        height: 32px;
    }
    #skin_2 .radio, #skin_2 .radio-checked, #skin_2 a.radio-fx {
        width: 16px;
        height: 16px;
    }
    #skin_3 .radio, #skin_3 .radio-checked, #skin_3 a.radio-fx {
        width: 24px;
        height: 24px;
    }
    #skin_1 .radio {
        background: url(http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0160/bullet_red.png) no-repeat;
    }
    #skin_1 .radio-checked {
        background: url(http://cdn4.iconfinder.com/data/icons/fatcow/32x32_0160/bullet_green.png) no-repeat;
    }
    #skin_2 .radio {
        background: url(http://cdn4.iconfinder.com/data/icons/uidesignicons/radiobutton_no.png) no-repeat;
    }
    #skin_2 .radio-checked {
        background: url(http://cdn4.iconfinder.com/data/icons/uidesignicons/radiobutton_yes.png) no-repeat;
    }
    #skin_3 .radio {
        background: url(http://cdn2.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_05.png) no-repeat;
    }
    #skin_3 .radio-checked {
        background: url(http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_06.gif) no-repeat;
    }
    table {
        width: 300px;
        border: 1px solid #CCC;
        padding: 5px;
        background: whiteSmoke
    }
    td {
        border-bottom: 1px solid #CCC;
        padding: 5px;
    }
    h1 a, h2 a{
        color: inherit;
    }

HTML 

<h1><a href="http://stackoverflow.com/questions/5112995/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo" class="question-hyperlink">Stackoverflow: Is there an easy way to replace radio button with Images (and a colored border
    for selected)</a></h1>
<h2><a href="so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/">Original: http://so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/#</a></h2>

<form id="form">
    <table id="skin_1" summary="layout table">
        <tr>
            <td>
                <input type="radio" name="music" value="1" />
            </td>
            <td>music 1</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="music" value="2" checked="checked" />
            </td>
            <td>music 2</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="music" value="3" />
            </td>
            <td>music 3</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="music" value="4" />
            </td>
            <td>music 4</td>
        </tr>
        <tr>
            <td colspan=2>
                <hr />
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="1" />
            </td>
            <td>stereo 1</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="2" />
            </td>
            <td>stereo 2</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="3" />
            </td>
            <td>stereo 3</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="stereo" value="4" />
            </td>
            <td>stereo 4</td>
        </tr>
        <tr>
            <td colspan=2>
                <hr />
            </td>
        </tr>
        <tr>
            <td>
                <input class="button" type="submit" name="submit" />
            </td>
            <td>
                <select id="change-skin">
                    <option value="skin_1">skin 1</option>
                    <option value="skin_2">skin 2</option>
                    <option value="skin_3">skin 3</option>
                </select>
            </td>
        </tr>
    </table>
</form>

无论如何，我把它放在一个jsfiddle中：http://jsfiddle.net/B63PH/。

相关问题
最新问题