Question

我在一个网站上工作，在实现像单选按钮（类似https://www.harrys.com/en/us/signup/products之类）的div（具有产品名称，价格和图片）时遇到了麻烦

任何类型的解决方案都将不胜感激，我目前正在使用bootstrap4＆JQuery / Javascript

Answer 1

一个简单的解决方案是使用一个类来指示选择了哪个按钮，然后捕获每个按钮的单击并：

（1）在所有按钮上关闭课程，

（2）打开类的单击按钮

简单，优雅，有效。

$('.myradio').click(function(){
  $('.myradio').removeClass('myactive');
  $(this).addClass('myactive');
});

.myradio{display:inline-block;}
.myactive{background:dodgerblue;color:white;}

/* Appearance only */
.myradio{padding:3px 7px;margin-left:10px;border:1px solid dodgerblue;border-radius:5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="myradio myactive">One</div>
<div class="myradio">Two</div>
<div class="myradio">Three</div>

如果需要，还可以为每个div分配一个唯一的ID，并跟踪哪个ID具有“活动”类。这样一来，您就可以确定当前选中了哪个按钮，并且可以将数据发送到某个地方。

Answer 2

这个想法是让用户单击单选按钮的标签。这使周围的div可以做其他事情，并且看起来确实是您实际单击的对象。您还必须使用标签中的“ for”属性来引用输入中的ID。

如果使用name属性，单选按钮将取消选择其他按钮并选择已单击的按钮。请注意，标记上的所有无线电都包含名称“ myradio”。尽管它们具有不同的ID。这样您就可以拉回这些数据并将其用于您的喜好。

请注意，CSS会很繁重。我们让它查找已检查的输入（input [name =“ myradio”]：checked），然后使用“ +”抓住其后的下一个元素（.clickable或.clickable .checked-box）。

我还在示例中添加了一个小jQuery，以在控制台中显示所选框的ID，以便您了解数据返回的含义。

这也是我使用的CSS选择器的更多信息的链接。

CSS元素+元素选择器

https://www.w3schools.com/cssref/sel_element_pluss.asp

<!DOCTYPE html>
<html>
    <head>
        <title>Code Sample</title>
        <style>
            .div-inline-list{
                margin: 24px auto;
                width: 80%;
                text-align: center;
            }
            .div-inline-list > .product-container{
                display: inline-block;
                margin: 16px;
            }
            .product-container{
                position: relative;
                width: 100px;
                height: 100px;
                padding: 0px;
            }

            .product{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

            }
            .clickable{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
                border: 1px solid green;
                border-radius: 4px;
                transition: all ease .5s;
                z-index: 10;
            }
            .checked-box{
                position: absolute;
                top: 0px;
                right: 0px;
                width: 22px;
                height: 22px;
                background-color: #0055ff;
                color: #fff;
                text-align: center;
                border-top-right-radius: 4px;
                display: none;
            }

            input[name="myradio"]:checked + .clickable{
                border-color: #0055ff; 
                box-shadow: 0px 0px 6px 2px #0055ff;
            }

            input[name="myradio"]:checked + .clickable .checked-box{
                display: block;
            }
        </style>
    </head>
    <body>
        <!-- create the div inline boxes -->
        <div class="div-inline-list">
            <!-- create the product container the user sees -->
            <div class="product-container">
                <input id="prod1" type="radio" name="myradio">
                <label for="prod1" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 1</p>
            </div>
            <div class="product-container">
                <input id="prod2" type="radio" name="myradio">
                <label for="prod2" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 2</p>
            </div>
            <div class="product-container">
                <input id="prod3" type="radio" name="myradio">
                <label for="prod3" class="clickable"><span class="checked-box">&#10004;</span></label>
                <p class="product">Prod 3</p>
            </div>
        </div>
        <!-- Added jquery since you are using bootstrap -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                //on radio button "myradio" state change log to the console to view
                $('input[name="myradio"]').change(function(){
                    console.log("#" + $('input[name="myradio"]:checked').attr('id'));
                });
            });
        </script>
    </body>
</html>

用作单选按钮的自定义div

2 个答案: