Javascript 显示一个'；分区'；仅当选中特定复选框时，才选中该复选框

我有一个Wordpress插件中的下一个表单，我只想在选中“Not free 1”或“Not free 2”复选框时显示带有“Price”文本字段的“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.js：

---

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

我认为选项应该是单选按钮而不是复选框。此代码将帮助您开始：

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

---

最后，我得出了这个可行的解决方案：

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

//插件中的表单（不是我的）：
类别
选择选项。。。
自由的
不免费1
不是免费的2
价格
//另一个插件（*display price.php*）（这是我的）
添加操作（“wp\u排队脚本”、“添加我的脚本”）；
函数add_my_script（）{
wp_排队_脚本(
“显示价格”，
插件\u url（'/display price.js'，\u文件\u），
数组（'jquery'）
);
}
//一个jQuery（*display price.js*）来显示带有
//仅当选项“非免费1”或
//已选择“非免费2”
jQuery（文档）.ready（函数（$）{
var cat=[“4”，“7”]；//显示价格字段的选项值
$（“#price”）.parent（'div'）.hide（）；
$（'#category'）。更改（函数（）{
if（$.inArray（$（'#category'）.val（），cat）>-1）{
$（“#price”）.parent（'div'）.show（）；
}否则{
$（“#price”）.parent（'div'）.hide（）；
} 
});
});

---

display-price.php和display-price.js文件都位于同一个目录（默认的Wordpress插件目录）。

请参阅文档，并@andrew I更新了问题。您是否收到任何可以共享的错误消息？发生了什么？没有错误，没有其他事件。在jQuery（document）行之前放置一个警报，在该函数中放置一个警报，然后查看是否没有收到任何警报，一个或两个警报。调试时间到了…很好。在页面加载时也可以隐藏/显示代码，因为有些浏览器在页面刷新时会保留用户输入。“把它放在一个函数中，并用$（）调用它。@andrew我添加了一个答案，但我仍然需要一些帮助。”。

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

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