如何将单选按钮替换为还包含提交按钮的图像

How to replace radio buttons with images that also includes a submit button

本文关键字：提交 包含 按钮 图像 单选按钮 替换      更新时间：2023-09-26

我只是试图用图像替换我的单选按钮并包含一个提交按钮。不幸的是，我的提交按钮已停用，我的单选按钮不会一直检查。这是可以修复的吗？

Jquery：

<script type="text/javascript">
$(document).ready(function(){
     $("img[id='img2']").css({"display": "none"});
     $("img[id='img4']").css({"display": "none"});
     $("img[id='img6']").css({"display": "none"});

    $("img[id=img1]").click(function(){
        $("img[id='img2']").show().css({"display": "block"});
        $(this).prev().attr('checked',true);
        $("img[id='img4']").hide();
        $("img[id='img6']").hide();

    });
    $("img[id='img3']").click(function(){
        $("img[id='img4']").show().css({"display": "block"});
        $(this).prev().attr('checked',true);
        $("img[id='img2']").hide();
        $("img[id='img6']").hide();
    });
   $("img[id='img5']").click(function(){
        $("img[id='img6']").show().css({"display": "block"});
        $(this).prev().attr('checked',true);
        $("img[id='img2']").hide();
        $("img[id='img4']").hide();
    });

  });
</script>

.CSS：

 <form class="form-horizontal" method="POST" id="subscribeForm" action="{{URL::route('star-update')}}">
        <input type="radio"  value="1.0" name="imagename" style="display:none"><img id="img1" src="boxone.png">
        <img id="img2" src="picone.png" style="position:absolute">
        <input type="radio" value="1.5" name="imagename" style="display:none"><img id="img3" src="boxtwo.png">
       <img id="img4" src="pictwo.png" style="position:absolute">
        <input type="radio" value="2" name="imagename" style="display:none"> <img id="img5" src="boxthree.png">
       <img id="img6" src="picthree.png" style="position:absolute">
{{Form::token()}} 
    <br>
  <input name="submit" type="submit"  value="submit">
   </form>

> 尝试type="hidden"输入，而不是通过 CSS （ display: none ） 隐藏它们。

通过CSS隐藏输入基本上会使表单禁用。

相关文章：