Question

我正试图找出一种方法，允许用户选择无线电选项，但如果他们改变主意，则取消选择该选项。我还想隐藏其他表单字段，如果他们选择一个选项，因为这些字段不相关。我可以让代码在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帮助您将问题隔离到输入类型=＆＃34; radio＆＃34;。无论出于何种原因，firefox都支持复选框，并且已经能够检查和取消选中。我为每个输入和一些代码添加了一个名称，以防止使用相同的名称选择多个复选框。这样它就像一个无线电组一样。

因此，经过这一点，是否应该完全避免广播组？我认为任何选择都应该能够取消选择，但这不是收音机的默认行为。

＆＃13;

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

＆＃13;

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

＆＃13;

输入无线电已选中/未选中无法在Firefox 38.0.5中运行Windows - jquery

2 个答案: