CODEWITHSUNDEEP
javascripthtmlcss
Don't Be negative
Don't Be negative

Reputation: 1215

Html select only one button at once for non Radio Buttons

This is my Code

$(document).ready(function(){
         $("a.btn1").click(function() {   
               $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down");
      
             });
            
             $("a.btn2").click(function(){    
                 
                  $(this).find("i").toggleClass("fa-smile-o fa-frown-o"); 
            }); 
        
            $("a.btn3").click(function(){ 
        
               
                $(this).find("i").toggleClass("fa-unlock fa-unlock-alt"); 
            }); 
     });
.fa {
 font-size: 58px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
    <a class="btn1"><i class="fa fa-thumbs-o-up"></i></a>
    <a class="btn2"><i class="fa fa-smile-o"></i></a>
    <a class="btn3"><i class="fa fa-unlock"></i></a>
</div>

Now Here I want to Select only One button/"<a" at once and here they are not Radio Buttons

I tried with many examples but mostly they are Radio buttons

But I want to use it for <a tag and only one option at once..

But here its selecting all three

after that submit only one.. Due to this at Submit I am facing errors.. the value of score is mismatching.. please help on this kind

Upvotes: 1

Views: 371

Answers (2)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

New answer with updated info

-- can toggle answer already chosen

$('.buttons a').click(function() {
	if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $('.buttons a i:nth-child(1)').removeClass('hidden').addClass('shown');
    $('.buttons a i:nth-child(2)').removeClass('shown').addClass('hidden');
  } else {
    $('.buttons a').removeClass('selected');
    $('.buttons a i:nth-child(1)').removeClass('hidden').addClass('shown');
    $('.buttons a i:nth-child(2)').removeClass('shown').addClass('hidden');
    $(this).addClass('selected');
          $(this).find('i').toggleClass('shown').toggleClass('hidden');
  }
})
.fa {
 font-size: 58px !important;
}
.selected i {
  color: red;
}
i.hidden {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons col-sm-10 col-sm-offset-1">
  <a class="btn1">
    <i class="fa fa-thumbs-o-up shown"></i>
    <i class="fa fa-thumbs-o-down hidden"></i>
  </a>
  <a class="btn2">
    <i class="fa fa-smile-o shown"></i>
    <i class="fa fa-frown-o hidden"></i>
  </a>
  <a class="btn3">
    <i class="fa fa-unlock shown"></i>
    <i class="fa fa-unlock-alt hidden"></i>
  </a>
</div>

https://jsfiddle.net/Hastig/eno21p25/

Original style answer

-- cant toggle chosen answer

If you're wanting to add a class to the a tag to show selection you can remove 'selected' from all a tags and add it to this..

$('.buttons a').click(function() {
	$('.buttons a').removeClass('selected');
  $('.buttons a i').removeClass('fa-thumbs-o-down fa-frown-o fa-unlock-alt');
  $('.buttons a.btn1 i').addClass('fa-thumbs-o-up');
  $('.buttons a.btn2 i').addClass('fa-smile-o');
  $('.buttons a.btn3 i').addClass('fa-unlock');
  $(this).addClass('selected');
	if ($(this).hasClass('btn1')) {
    $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down");
  } else if ($(this).hasClass('btn2')) {
    $(this).find("i").toggleClass("fa-smile-o fa-frown-o"); 
  } else if ($(this).hasClass('btn3')) {
    $(this).find("i").toggleClass("fa-unlock fa-unlock-alt"); 
  }
})
.fa {
 font-size: 58px !important;
}
.selected i {
  color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons col-sm-10 col-sm-offset-1">
  <a class="btn1"><i class="fa fa-thumbs-o-up"></i></a>
  <a class="btn2"><i class="fa fa-smile-o"></i></a>
  <a class="btn3"><i class="fa fa-unlock"></i></a>
</div>

https://jsfiddle.net/Hastig/hncLnzh4/

Upvotes: 2

Eddie
Eddie

Reputation: 26844

One option is to add active-class and original-class on <a>. Just get those value using .attr()

$(".col-sm-10>a").click(function() {
  var selected = $(this).find('i')[0];

  $(".col-sm-10>a>i").removeClass(function(e) {
    return selected !== this ? $(this).attr('active-class') : $(this).attr('original-class');
  }).addClass(function() {
    return selected !== this ? $(this).attr('original-class') : $(this).attr('active-class');
  });
});
.fa {
  font-size: 58px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
  <a class="btn1"><i original-class='fa-thumbs-o-up' active-class='fa-thumbs-o-down' class="fa fa-thumbs-o-up"></i></a>
  <a class="btn2"><i original-class='fa-smile-o' active-class='fa-frown-o' class="fa fa-smile-o"></i></a>
  <a class="btn3"><i original-class='fa-unlock' active-class='fa-unlock-alt' class="fa fa-unlock"></i></a>
</div>

Upvotes: 3

Related Questions