Question

我有这个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>

当选中/取消选中复选框时，它应显示/隐藏选择框，但它不会执行任何操作。

我添加了警报以进行测试，但这甚至没有显示任何内容

Answer 1

我认为您不能直接在Jquery中调用该名称，您应该使用selector [name =“name = delete_col5”]，但是为了更容易添加一个ID到您的复选框并使用#in选择它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>

Answer 2

试试这个：

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

Answer 3

您的功能完美无缺，只是您没有正确访问输入。应该是：

$('input[name=delete_col5]')

以下是 demo

为了让您的功能更加轻松，您可以这样写：

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

以下是 demo

Answer 4

您应该使用“id”参数而不是“name”。通过这种方式，你可以通过＃获得它。所以你的活动将是：

<input type="checkbox" id="delete_col5" name="delete_col5" class="delete_col5" value="dragon_reseller" /> Delete<br>

$('#delete_col5').on('click', function(){
...
...
});

javascript没有显示/隐藏复选框点击上的选择框

4 个答案: