CODEWITHSUNDEEP
javascriptjqueryformsfirefoxradio-button
JacobLett
JacobLett

Reputation: 437

input radio checked / unchecked not working in Firefox 38.0.5 Windows - jquery

I am trying to figure out a way to allow users to select radio options but then deselect the option if they change their mind. I would also like hide other form fields if they select an option because those fields are not relevant. I can get the code to work in Chrome but not in Firefox. Any help would be greatly appreciated. 

<!-- language: lang-html -->
 <script src="/javascripts/libs/jquery-1.8.3.min.js"></script>

   <input type="radio" name="group1" id="preloaded-1" value="preloaded_img-1"  />
 <input type="radio" name="group1" id="preloaded-2" value="preloaded_img-2"  />
<span></span>
    <div>Hide this content when a radio is selected</div>
    <button>Clear selections</button>

<!-- language: lang-js -->
    // Hides/reveals content when radio group is selected   
    $( "input[type=radio]" ).on( "click", function() {
        if ($(this).is(':checked')) {
          $('div').show();
        } else {
          $('div').hide();
        }
});

//Clears all radio selections
$( "button" ).click(function() {
    $('input[name="group1"]').attr('checked', false);
     $('div').show();
});



//Adds the ability to deselect radio buttons
$("input[type=radio]").click(function(event) {
        var radio_selector = 'input[type="radio"]',
            $radio;

        // Ignore the event when the radio input is clicked.
        if (!$(event.target).is(radio_selector)) {

        $radio = $(this).find(radio_selector);
            // Prevent the event to be triggered
            // on another element, for the same click
            event.stopImmediatePropagation();
            // We manually check the box, so prevent default
           event.preventDefault();
            $radio.prop('checked', !$radio.is(':checked'));
        }
    });
    $("input[type=radio]").on('change click', function(event) {
        // The change event only fires when the checkbox state changes
        // The click event always fires

        // When the radio is already checked, this event will fire only once,
        //   resulting in an unchecked checkbox.
    // When the radio is not checked already, this event fires twice
        //   so that the state does not change
        this.checked = !this.checked;
    });

http://codepen.io/JacobLett/pen/mJwrZV?editors=101

Upvotes: 1

Views: 2644

Answers (2)

JacobLett
JacobLett

Reputation: 437

Thank you @depperm for your help in isolating the issue to the input type="radio". For whatever reason checkboxes are better supported on firefox and already have the ability to be check and unchecked. I added a name to each input and some code to prevent multiple checkboxes from being selected with the same name. This way it acts just like a radio group.

So after going through this, should radio groups be avoided altogether? I think any selection should have the ability to be deselected but that is not the default behavior of a radio.

// Hides/reveals content when checkbox is selected	
$( "input[type=checkbox]" ).on( "click", function() {
    var checkedAtLeastOne = false;
    $('input[type="checkbox"]').each(function() {
        if ($(this).is(":checked")) {
          checkedAtLeastOne = true;
        }
    });
	        if (!checkedAtLeastOne) {
              $('div').show();
	        } else {
	          $('div').hide();
	        }
	});

	// prevents multiple checkboxes from being selected - simulate radio group
	$(':checkbox').on('change',function(){
 	var th = $(this), name = th.prop('name'); 
	 if(th.is(':checked')){
 	    $(':checkbox[name="'  + name + '"]').not($(this)).prop('checked',false);   
	  }
	});

//Clears all checkbox selections
$( "button" ).click(function() {
    $('.group1').attr('checked', false);
     $('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="checkbox" class="group1" id="preloaded-1" value="preloaded_img-1" name="group1"  />
<input type="checkbox" class="group1" id="preloaded-2" value="preloaded_img-2" name="group1"  />
<span></span>
<div>Hide this content when a radio is selected</div>
<button>Clear selections</button>

Upvotes: 1

depperm
depperm

Reputation: 10746

I would change your js to be:

$( "input[type=radio]" ).on( "click", function() {
      if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
          $(this).prop("checked", !$(this).prop("checked"));
        if ($(this).is(':checked')) {
          $('div').show();
        } else {
          $('div').hide();
        }
});

This will only apply if on ff, and on codepen seems to work.

EDIT

Checkboxes would work a lot nicer:

// Hides/reveals content when checkbox is selected	
$( "input[type=checkbox]" ).on( "click", function() {
    var checkedAtLeastOne = false;
    $('input[type="checkbox"]').each(function() {
        if ($(this).is(":checked")) {
          checkedAtLeastOne = true;
        }
    });
	        if (!checkedAtLeastOne) {
              $('div').show();
	        } else {
	          $('div').hide();
	        }
	});



//Clears all checkbox selections
$( "button" ).click(function() {
    $('.group1').attr('checked', false);
     $('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="checkbox" class="group1" id="preloaded-1" value="preloaded_img-1"  />
<input type="checkbox" class="group1" id="preloaded-2" value="preloaded_img-2"  />
<span></span>
<div>Hide this content when a radio is selected</div>
<button>Clear selections</button>

Upvotes: 1

Related Questions