javascript - 仅当选中特定复选框时显示 'div' 框

Question

我在 Wordpress 插件中有下一个表单，我想仅在选中复选框“非免费 1”或“非免费 2”时显示带有“价格”文本字段的“div”框。我知道这可以用 jQuery/javascript 实现，但我自己做不到。有什么建议吗？

<form action="" method="post" class="adverts-form">
    <fieldset>
        <div class="adverts-field-select ">
            <label for="advert_category">Categories</label>
            <div class="adverts-multiselect-options">
                <label class="adverts-option-depth-0" for="advert_category-0">
                    <input name="advert_category[]" value="1" id="advert_category-0" type="checkbox"> Free</label>
                <br>
                <label class="adverts-option-depth-0" for="advert_category-1">
                    <input name="advert_category[]" value="2" id="advert_category-1" type="checkbox"> Not free 1</label>
                <br>
                <label class="adverts-option-depth-0" for="advert_category-2">
                    <input name="advert_category[]" value="3" id="advert_category-2" type="checkbox"> Not free 2</label>
                <br>
            </div>
        </div>
        <div class="adverts-field-text" style="display: none;">
            <label for="adverts_price">Price</label>
            <input name="adverts_price" id="adverts_price" type="text">
        </div>
    </fieldset>
</form>

更新

这是我尝试过的，没有成功。

我添加了一个插件(display-price.php):

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'display-price', // name your script so that you can attach other scripts and de-register, etc.
        WP_PLUGIN_DIR . '/display-price.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

和display-price.js:

jQuery(document).ready(function($) {

var advertNodes = $('#advert_category-1, #advert_category-2 ');
var advertInput = $('.adverts-field-text');

advertNodes.click(function() {
  if (!advertNodes.is(':checked')) {
    advertInput.hide();
  }
  else {
    advertInput.show(); 
  }
});

})

文件 display-price.php 和 display-price.js 位于同一目录(默认的 Wordpress 插件目录)。

Answer 1

我认为选项应该是单选按钮而不是复选框。此代码将帮助您入门:

var advertNodes = $('#advert_category-1, #advert_category-2 ');
var advertInput = $('.adverts-field-text');

advertNodes.click(function() {
  if (!advertNodes.is(':checked')) {
    advertInput.hide();
  }
  else {
    advertInput.show(); 
  }
});