Question

我想在这里做两件事。 1：我试图在单击单选按钮时显示内容 2：我正在尝试用图像替换默认单选按钮

我可以完全消除无线电的想法，只需用图像进行点击显示，但最终的任务是捕获用户输入并发送为电子邮件。我在这个问题中排除了这一部分。我的解决方案在chrome中运行良好但在IE 8中我无法显示内容。在IE 9中它可以工作

这是我目前的尝试：

JavaScript的：

  $(function(){

  var options = $('#options').find('input');
    options.click(function(){
      var id = "opt" + $(this).val();
      $(".optDivs").hide();
      $("#" + id).show();

    });

  var selections = $('#selections').find('input');

    selections.click(function(){
      var id = "opt" + $(this).val();
      $(".slctDivs").hide();
      $("#" + id).show();

    });

  });

HTML：

<html><head>    
<style>
    #one{
        position:absolute;
        left:-99999999;
    }
</style>
</head>
<body>

    <div id="options">
        <div class="opt1">
            <input type="radio" name="primary" id="one" value="1"> 
            <label for="one"><img width="50px" src="http://gfxlovers.com/smilies/imgs/smiling/smiling025_2.gif"></label>
        </div>
      <div class="opt2"><input type="radio" name="primary" value="2"> Option 1</div>
      <div class="opt3"><input type="radio" name="primary" value="3"> Option 1</div>
    </div>

    <div id="opt1" class="optDivs" style="display:none;">content option 1</div>
    <div id="opt2" class="optDivs" style="display:none;">content option 2</div>
    <div id="opt3" class="optDivs" style="display:none;">content option 3</div>


    <div id="selections">
      <div class="opt4"><input type="radio" name="secondary" value="4"> Option 2</div>
      <div class="opt5"><input type="radio" name="secondary" value="5"> Option 2</div>
      <div class="opt6"><input type="radio" name="secondary" value="6"> Option 2</div>
    </div>

    <div id="opt4" class="slctDivs" style="display:none;">content option 5</div>
    <div id="opt5" class="slctDivs" style="display:none;">content option 6</div>
    <div id="opt6" class="slctDivs" style="display:none;">content option 7</div>



<div id="chrome_hitahintpanel" style="opacity: 0; display: none;"><input id="chrome_hitahintinput" type="text"></div><div id="chrome_hintswindow"></div><div id="chrome_linksearchpanel" style="opacity: 0; display: none;"><input id="chrome_linksearchinput" type="text"></div></body></html>

您可以看到它已托管并正常工作here。

知道我在这里缺少什么吗？

Answer 1

您应该使用CSS隐藏您的无线电元素并改为显示图像。然后，您应该在jquery（或类似）中捕获图像，以检查是否正在单击其中一个图像。如果是：将checked-attribute添加到相应的radio元素。

用图像替换默认无线电

1 个答案: