Question

我想实现通过双击单选按钮的相同元素来清除选择的选项。但是我不明白

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap
.min.css">
</head>
<body>
 <div class="col">
    <div class="btn-group btn-group-toggle"   >
     <label class="btn btn-outline-primary">
     <input  type="radio" >1</label>
     <label class="btn btn-outline-primary">
     <input type="radio"  > 2</label>
     <label class="btn btn-outline-primary" >
     <input type="radio"  > 3</label>

    </div>
     <br>
    </div>
  </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> 
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/
    umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/
    bootstrap.min.js"></script>
 <script >
$('.btn-group').on('click', '.btn', function() {
$(this).addClass('active').siblings().removeClass('active');
});

Answer 1

像这样吗？

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Insert title here</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
   </head>
   <body>
      <div class="col">
         <div class="btn-group btn-group-toggle" ><label class="btn btn-outline-primary"><input type="radio" >1</label><label class="btn btn-outline-primary"><input type="radio" > 2</label><label class="btn btn-outline-primary" ><input type="radio" > 3</label></div>
         <br>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/ umd/popper.min.js"></script>
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/ bootstrap.min.js"></script>
       <script>// Single click - Select and deselect all buttons
           $('.btn').click(function(){
               $('.btn').removeClass('active');
               $(this).addClass('active');
           });

           // Double click - Deselect button 
           $('.btn').dblclick(function(){
               $(this).removeClass('active');
           });
       </script>
   </body>
</html>

使用click和dblclick方法；

禁用jQuery单选按钮

1 个答案: