Question

我正在为一个网站创建一个弹出窗口，让您在登录前选择一些选项。这笔交易是我试图使用jquery，功能“一次选择一个复选框”。

我尝试了很多不同的可能性，但由于某种原因，它不适用于我的代码。

这是我的代码：

    <body>
    <header>
        <div class="titulo">
            <img src="GET_your.png" alt="">
        </div>
    </header>
    <div class="container">
        <article class="mf">
            <div><img src="Indetify.png" alt="" style="padding-    bottom:40px;"></div>
            <div id="firstblock">
                <div class="male">
                    <img src="Sim_Boy.png" alt=""><br>
                    <input type="checkbox" id="chkBox100"      onClick="toggle(this);" class="input_class_checkbox"><br>
                    <img src="Male.png" alt="">
                </div>
                <div class="female">
                    <img src="Sim_girl.png" alt=""><br>
                    <input type="checkbox" id="chkBox121"         onClick="toggle(this);" class="input_class_checkbox"><br>
                    <img src="Female.png" alt="" style="padding-   top:4px;">
                </div>
            </div>
        </article>
        <aside class="all">
            <div style="margin-left:60px;"><img src="like.png" alt="" style="padding-bottom:40px;"></div>
            <div>
                <div class="all_one">
                    <img src="Sim_Boy.png" alt=""><br>

                    <input type="checkbox" class="input_class_checkbox"><br>

                    <img src="Male.png" alt="">
                </div>
                <div class="all_one">
                    <img src="Sim_girl.png" alt=""><br>
                    <input type="checkbox" class="input_class_checkbox"><br>
                    <img src="Female.png" alt="" style="padding-top:4px;">
                </div>
                <div class="all_one">
                    <img src="Bi_MF.png" alt=""><br>
                    <input type="checkbox"    class="input_class_checkbox"><br>
                    <img src="Both.png" alt="">
                </div>
            </div>
        </aside>


    </div>

    <footer>
        <div class="button">
            <img src="Button1.png" alt="">
        </div>
    </footer>
    <script>
    $('.input_class_checkbox').each(function(){
        $(this).hide().after('<div class="class_checkbox" />');

    });

    $('.class_checkbox').on('click',function(){
                  $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
    });

    </script>


</body>

请注意，我在复选框中应用了一些css，并为我构建的其他人更改了默认值。我认为这可能是问题，

.class_checkbox {
width: 57px;  
height: 57px;
background-image:url(input.png);

}
.class_checkbox.checked {
    background-image:url(Checked_c.png);
    width:65px;
    height:59px;

}

因为当我尝试这样做时

<body>
<div>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
</div>
<div>
<input type="checkbox" class="example2" />
<input type="checkbox" class="example2" />
<input type="checkbox" class="example2" />
</div>
</body>
<script>
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);  
});
$('input.example2').on('change', function() {
$('input.example2').not(this).prop('checked', false);  
});

</script>

它完美无缺!!!!但是当我将它应用到我的代码中时，它不起作用，我尝试了几个代码...

Answer 1

请改用单选按钮。按“名称”对所选组进行分组：

  <input type="radio" name="example" value="male"> Male<br>
  <input type="radio" name="example" value="female"> Female<br>
  <input type="radio" name="example" value="other"> Other

  <input type="radio" name="example2" value="plane"> Plane<br>
  <input type="radio" name="example2" value="car"> Car<br>
  <input type="radio" name="example2" value="bus"> Bus

请参阅：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

PS：单选按钮的样式可以看起来像复选框，如果这是您首选的布局......

在jquery

1 个答案: