仅在选中特定复选框时显示"div"框 [英] Display a 'div' box only when a specific checkbox is selected

问题描述

我在Wordpress插件中具有下一个表单，并且仅在选中不免费1"或不免费2"复选框时，才想显示带有价格"文本字段的"div"框.我知道可以使用jQuery/javascript来实现，但是我自己无法做到这一点.有什么建议吗?

I have the next form in a Wordpress plugin and I want to display the 'div' box with the 'Price' text field only when the checkboxes 'Not free 1' or 'Not free 2' are checked. I know that this can be achieved with jQuery/javascript, but I am not able to do this myself. Any suggestions?

<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>

更新

这是我尝试的，但没有成功.

This is what I tried, without success.

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

I added in a plugin (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插件目录).

Files display-price.php and display-price.js are in the same directory (the default Wordpress plugins directory).

推荐答案

最后，我到达了这个可行的解决方案:

Finally I have arrived to this working solution:

// a form in a plugin (not mine):
<form action="" method="post">
    <fieldset>
        <div>
            <label for="category">Categories</label>
            <select id="category" name="category">
               <option value="">Select Options ...</option>
               <option value="2">Free</option>
               <option value="4">Not free 1</option>
               <option value="7">Not free 2</option>
            </select>
        </div>

        <div>
           <label for="price">Price</label>
           <input name="price" id="price" type="text">
        </div>

    </fieldset>
</form>

// another plugin (*display-price.php*) (this is mine)
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'display-price',
        plugins_url( '/display-price.js' , __FILE__ ),
        array('jquery')
    );
}

// a jQuery (*display-price.js*) to display the 'div' box with
// the 'Price' text field only when the option 'Not free 1' or
// 'Not free 2' are selected
jQuery(document).ready(function($) {

    var cat = ["4", "7"]; // option values for which the price field is displayed
    $("#price").parent('div').hide();

    $('#category').change(function(){
        if($.inArray($('#category').val(), cat) > -1) {
            $("#price").parent('div').show(); 
        } else {
            $("#price").parent('div').hide(); 
        } 
    });
});

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

Both display-price.php and display-price.js files are located in the same directory (the default Wordpress plugins directory).

这篇关于仅在选中特定复选框时显示"div"框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！