已选中/未选中的输入无线电在 Firefox 38.0.5 中不起作用 Windows - jquery

Question

我正在尝试找出一种方法来允许用户 select 单选选项，但如果他们改变主意，则取消select 该选项。我还想隐藏其他表单字段，如果它们 select 是一个选项，因为这些字段不相关。我可以让代码在 Chrome 中运行，但不能在 Firefox 中运行。任何帮助将不胜感激。

<!-- 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

我会将您的 js 更改为：

$( "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();
        }
});

这仅适用于 ff，并且在 codepen 上似乎有效。

编辑

复选框会更好用：

// 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

感谢@depperm 帮助将问题隔离到输入类型="radio"。无论出于何种原因，复选框在 Firefox 上得到了更好的支持，并且已经具有选中和取消选中的能力。我为每个输入添加了一个名称，并添加了一些代码以防止选择多个具有相同名称的复选框。这样它就像一个广播组。

那么在经历了这些之后，是否应该完全避免广播组？我认为任何选择都应该具有取消选择的能力，但这不是收音机的默认行为。

// 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>

已选中/未选中的输入无线电在 Firefox 38.0.5 中不起作用 Windows - jquery

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

javascript

forms

firefox

jquery

radio