0

如果你不介意的话，帮助不大。

基本上，我有 3 个单选框和一个 div。选择第三个无线电框时，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();
  }
});

非常感谢

4

3 回答 3

4

只需检查单选按钮是否被选中并显示 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

于 2012-06-15T00:00:07.117 回答
1

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

$("input[type=radio]").on("click", function() {
    if ( $(this).val() == "custom_field" ) {
        $("div").show();
    } else {
        $("div").hide();        
    }
});​
于 2012-06-14T23:53:07.947 回答
0

我会尝试这样的事情：

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);
于 2012-06-15T00:02:06.560 回答