0

我想在这里实现两件事。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>

您可以在这里看到它托管和工作。

知道我在这里想念什么吗？

4

1 回答 1

1

您应该使用 CSS 隐藏单选元素并显示图像。然后，您应该在 jquery（或类似的）中捕获图像以检查是否单击了其中一个图像。如果是：向相应的单选元素添加一个检查属性。

于 2013-03-31T17:15:29.337 回答