Javascript不显示/隐藏复选框点击的选择框

javascript not showing/hiding select box on checkbox click

本文关键字：选择 复选框 显示 隐藏 Javascript      更新时间：2023-09-26

我有这个HTML/JS代码:

<input type="checkbox" name="delete_col5" class="delete_col5" value="dragon_reseller" /> Delete<br>
        <select id="Customer_NewCallPlan5">
        <option value="">Change to...</option>
        </select>
        </td>       <script>
        $(document).ready(function(){
            $('input.delete_col5').on('click', function(){
                var trid = "Customer_NewCallPlan5";
                alert(trid);
                if($(this).is(':checked')){
                     $('#' + trid).hide();
                }else{
                     $('#' + trid).show();
                }
            });
        });
        </script>

当复选框被选中/未选中时，它应该显示/隐藏选择框，但它没有做任何事情。

我在测试中添加了警告，但它甚至没有显示任何东西

试试这个:

    <input type="checkbox" name="delete_col5" class="delete_col5" value="dragon_reseller" />     Delete<br>
    <select id="Customer_NewCallPlan5">
    <option value="">Change to...</option>
    </select>
    </td>       <script>
    $(document).ready(function(){
        $('input.delete_col5').change(function(){
            var trid = "Customer_NewCallPlan5";
            alert(trid);
            if($(this).is(':checked')){
                 $('#' + trid).hide();
            }else{
                 $('#' + trid).show();
            }
        });
    });
    </script>

我不认为你可以在Jquery中直接调用名称，你应该使用选择器[name="name=delete_col5"]，但为了使它更容易添加一个ID到你的复选框中，并使用Jquery选择器#选择它，然后继续使用你的脚本。

<input type="checkbox" id="delete_col5" name="delete_col5" class="delete_col5" value="dragon_reseller" /> Delete<br>
        <select id="Customer_NewCallPlan5">
        <option value="">Change to...</option>
        </select>
        </td>       <script>
        $(document).ready(function(){
            $('#delete_col5').on('click', function(){
                var trid = "Customer_NewCallPlan5";
                alert(trid);
                if($(this).is(':checked')){
                     $('#' + trid).hide();
                }else{
                     $('#' + trid).show();
                }
            });
        });
        </script>

您应该使用"id"来代替"name"。这样你就可以通过#来获取它。所以你的事件将是:

<input type="checkbox" id="delete_col5" name="delete_col5" class="delete_col5" value="dragon_reseller" /> Delete<br>
$('#delete_col5').on('click', function(){
...
...
});

您的函数工作得很好，这不仅仅是因为您没有正确访问输入。它应该是:

$('input[name=delete_col5]')
这是演示

为了使你的函数更简单，你可以这样写:

$('input[name=delete_col5]').on('click', function () {
  var trid = "#Customer_NewCallPlan5";
  $(trid).toggle();
});

这是演示

相关文章：