CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
Blind Despair
Blind Despair

Reputation: 3295

How to uncheck radio button in jquery using label

I have 3 buttons wrapped with labels of radio buttons, so basically control on radio is managed by those 3. 

<input type="radio" name="block_image_checkbox" id="block_image_checkbox_1" value="a">
  <label for="block_image_checkbox_1">
  <div id="block_image_1" class="block_image block_image_hover">
    <div class="block_image_overlay">
            <img src="img/1-1.png" alt="" id="image"/>
    </div>
  </div>
  </label>
  <input type="radio" name="block_image_checkbox" id="block_image_checkbox_2" value="b">
  <label for="block_image_checkbox_2">
    <div id="block_image_2" class="block_image block_image_hover">
      <div class="block_image_overlay">
            <img src="img/2-1.png" alt="" id="image"/>
      </div>
    </div>
  </label>

I use jquery to handle clicks on my buttons changing their view. My click handler is below.

$("#block_image_1").click(function() {
    if(!$('.block_image_overlay').hasClass('block_image_overlay_active')){
        $(this).children('.block_image_overlay').toggleClass('block_image_overlay_active');
        $('.block_image').removeClass('block_image_hover');
    }
    else {
        if($(this).children('.block_image_overlay').hasClass('block_image_overlay_active')){
            $(this).children('.block_image_overlay').toggleClass('block_image_overlay_active');
            $('.block_image').addClass('block_image_hover');
            $('#block_image_checkbox_1').prop('checked', false);
        }
        else{
            $('.block_image_overlay_active').toggleClass('block_image_overlay_active');
            $(this).children('.block_image_overlay').toggleClass('block_image_overlay_active');
        }
    }
});

I want to uncheck radio button if I click on its label when it's checked. But it does not work. I think because when I try to uncheck it, it may get checked again. But is there any solution for this situation without using another button?

Upvotes: 0

Views: 1547

Answers (4)

GeirrBenayahu
GeirrBenayahu

Reputation: 67

I just found a way to solve this in a way that isn't provided here yet. You can use DIVs instead of LABELs and attach JS to it that mimics a label, like this:

HTML:

<input type="radio" name="rooms" id="rooms_1" value="1">
<div class="radio-label" data-for="rooms_1">1</div>

JS:

$('.filter-option').on('click', '.radio-label', function() {
    var forId = $(this).data('for');
    if (!$('#'+forId).prop('checked')) {
        $('#'+forId).prop('checked', true);
    } else {
        $('#'+forId).prop('checked', false);
    }
});

Here is a fiddle of it: https://jsfiddle.net/yzbvcbo3/2/

Upvotes: 0

Chetan Joshi
Chetan Joshi

Reputation: 349

You can use Checkboxes for this, and if you want to have only one checkbox checked. you can write something like this 

$("input[name='block_image_checkbox']").change(function(){
var curCheckBox = this;
	$("input[name='block_image_checkbox']").each(function(){
		if(this === curCheckBox)
			$(this).attr("checked",true);
		else
			$(this).attr("checked",false);
	});
});;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="block_image_checkbox_1" name="block_image_checkbox" value="no" />
<label for="block_image_checkbox_1"> checkbox1 </label>
<input type="checkbox" id="block_image_checkbox_2" name="block_image_checkbox" value="yes" />
<label for="block_image_checkbox_2"> checkbox2</label>
<input type="checkbox" id="block_image_checkbox_3" name="block_image_checkbox" value="yes" />
<label for="block_image_checkbox_3"> checkbox3</label>

Upvotes: 1

black_pottery_beauty
black_pottery_beauty

Reputation: 879

Check this fiddle it may be work for you fiddle

<input type="radio" name="block_image_checkbox" id="block_image_checkbox_1" value="a" />
  <label>
  <div id="block_image_1" class="block_image block_image_hover">
    <div class="block_image_overlay">
            <img src="img/1-1.png" alt="" id="image"/>
    </div>
  </div>
  </label>
  <input type="radio" name="block_image_checkbox" id="block_image_checkbox_2" value="b">
  <label>
    <div id="block_image_2" class="block_image block_image_hover">
      <div class="block_image_overlay">
            <img src="img/2-1.png" alt="" id="image"/>
      </div>
    </div>
  </label>

$("#block_image_1").click(function() {
if($('#block_image_1').hasClass('block_image_hover')){
$('#block_image_checkbox_1').prop('checked',true)
$('#block_image_1').removeClass('block_image_hover').addClass('block_image_active');
}else{
$('#block_image_1').removeClass('block_image_active').addClass('block_image_hover');
$('#block_image_checkbox_1').prop('checked',false)
}

});

$("#block_image_2").click(function() {
if($('#block_image_2').hasClass('block_image_hover')){
$('#block_image_checkbox_2').prop('checked',true)
$('#block_image_2').removeClass('block_image_hover').addClass('block_image_active');
}else{
$('#block_image_checkbox_2').prop('checked',false)
$('#block_image_2').removeClass('block_image_active').addClass('block_image_hover');

}

Upvotes: 0

Milen Radkov
Milen Radkov

Reputation: 250

To uncheck radio button with jquery use this:

$(this).prop('checked', false);

Note: If you are using jQuery < 1.6 use this:

$(this).attr('checked', false);

jQuery .prop()

EDIT: See this example by softvar in JSFIDDLE

You can also see this question Radio button uncheck on second click

Upvotes: 1

Related Questions