输入无线电检查/未检查在 Firefox 38.0.5 Windows - jquery 中不起作用

Question

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

Answer 1

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>

Answer 2

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>