只有一个复选框一次在jquery中选择

我正在为一个网站的弹出窗口工作，使您在登录之前选择某些选项。这笔交易是，我试图申请与jquery，功能“一次选择一个复选框”。只有一个复选框一次在jquery中选择

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

这里是我的代码：我申请一些CSS的复选框，我改变了默认的对别人说我建

<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>

通知。我认为这可能是问题，

.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>

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

来源

2016-02-08 Alvaro

谢谢 – Alvaro

你有没有为什么不使用单选按钮？如果我没有弄错，这就是他们的意思...... – KjetilNordin

如果我正确理解您的要求，标准是使用单选按钮组来选择一个而不是复选框。 – semperfids

改为使用单选按钮。集团选定的组由“名”：

<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：单选按钮可样式看起来像复选框，如果这是你的首选布局...提前

来源

2016-02-08 16:42:25 KjetilNordin

只有一个复选框一次在jquery中选择

回答

相关问题