Question

如果你不介意，一点帮助。

基本上，我有3个收音机盒和一个div。选择第3个单选框时，div应该可见。但是，可以在页面加载时检查单选框，因此如果选中第3个框，则需要显示div，否则它应该最初隐藏，但如果稍后检查第3个框，则变为可见。

HTML：

<input type="radio" name="image_location" value="featured_image" />
<input type="radio" name="image_location" value="all_images" />
<input type="radio" name="image_location" value="custom_field" />

<div id="image_location_custom_field">
    ** Content **
</div>

我到目前为止使用JavaScript：

jQuery('input[name=image_location]').hide();
jQuery('input[name=image_location]').change(function() {
  var selected = jQuery(this).val();
  if(selected == 'custom_field'){
      jQuery('#caption_custom_field').show();
  } else {
      jQuery('#caption_custom_field').hide();
  }
});

非常感谢

Answer 1

检查是否检查了radiobutton是否显示div，你也可以使用css来隐藏div

<input type="radio" name="image_location" value="featured_image" />
<input type="radio" name="image_location" value="all_images" />
<input type="radio" name="image_location" value="custom_field" />

<div style="display:none" id="image_location_custom_field">
    ** Content **
</div>
//on dom ready
if (jQuery('input[value=custom_field]:checked').length > 0){
    jQuery('#image_location_custom_field').show()
}
else {
    jQuery('#image_location_custom_field').hide();
}
jQuery('input[name=image_location]').change(function() {
  var selected = jQuery(this).val();console.log(selected);
  if(selected == 'custom_field'){
      jQuery('#image_location_custom_field').show();
  } else {
      jQuery('#image_location_custom_field').hide();
  }
});

W / O检查FIDDLE
检查FIDDLE

Answer 2

在初始页面加载时使用CSS隐藏<div> - http://jsfiddle.net/yh5ct/

$("input[type=radio]").on("click", function() {
    if ( $(this).val() == "custom_field" ) {
        $("div").show();
    } else {
        $("div").hide();        
    }
});

Answer 3

我会尝试这样的事情：

jQuery.noConflict();

(function($) {
  $(document).ready(function() {
    $(':radio[name="image_location"]').on('change', function() {
      if ($(this).val() == 'custom_field') {
        $('#caption_custom_field').show();
      } else {
        $('#caption_custom_field').hide();
      }
    }).last().trigger('change'); // This triggers the event for the last element.
  });
})(jQuery);

jQuery show / hide div带有单选按钮的变化＆amp;页面加载

3 个答案: