0

よろしければ少し助けてください。

基本的に、私は3つのラジオボックスと1つの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();
  }
});

どうもありがとう

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

チェックFIDDLE
でチェックFIDDLEをW/O

于 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 に答える