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

输入无线电已选中未选中无法在Firefox 38.0.5中运行Windows-jquery,第1张

我正试图找出一种方法,允许用户选择无线电选项,但如果他们改变主意,则取消选择该选项。我还想隐藏其他表单字段,如果他们选择一个选项,因为这些字段不相关。我可以让代码在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

最佳答案:

2 个答案:

答案 0 :(得分:1)

感谢@depperm帮助您将问题隔离到输入类型=&#34; radio&#34;。无论出于何种原因,firefox都支持复选框,并且已经能够检查和取消选中。我为每个输入和一些代码添加了一个名称,以防止使用相同的名称选择多个复选框。这样它就像一个无线电组一样。

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

&#13; &#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; &#13; &#13;

答案 1 :(得分: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>

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复