Question

如果选中了相应的配对复选框，我会显示一系列输入字段。

我的问题是复选框对应一个输入字段。我是否必须将复选框号解析为函数作为参数，以便可以正确调用click函数？或者我该如何解决这个问题。

在我的示例中，您可以看到我的第一个复选框上有一个单击功能，但我希望该函数是通用的，我只想解析cb编号，我该如何在JQuery中执行此操作？

这是我的代码：

<script>
        $(function () {
            $("input.ui-spinner").spinner({
                min: 5,
                max: 15000,
                step: 5,
                start: 100,
                numberFormat: "d"
            });
            $("#cb\\[1\\]").click(function () {
                $("#cspinner\\[1\\]").val('0');
                $("#cspinner\\[1\\]").toggle();
            });
        });
</script>
<ul class="checkbox">
  <li>
    <input type="checkbox" id="cb[1]" name="cb[1]" value="pepperoni" /><label for="cb[1]">Pepperoni</label>
    <input id="cspinner[1]" class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" />
 </li>
 <li>
    <input type="checkbox" id="cb[2]" name="cb[2]" value="sausage" /><label for="cb[2]">Sausage</label>
    <input id="cspinner[2]" class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" />
 </li>
 <li>
    <input type="checkbox" id="cb[3]" name="cb[3]" value="mushrooms" /><label for="cb[3]">Mushrooms</label>
    <input id="cspinner[3]" class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" />
 </li>
</ul>

Answer 1

你可以试试这个 -

$("[id^='cb[']").click(function () {
    var num = this.id.replace('cb[', '').replace(']', '');
    $("#cspinner\\[" + num + "\\]").val('0');
    $("#cspinner\\[" + num + "\\]").toggle();
});

演示------> http://jsfiddle.net/MG6Zj/

Answer 2

 $('input[id*="cb"]').click(function () {
            $(this).siblings('input').val('0');
            $(this).siblings('input').toggle();
        });

您可以使用比您使用的更通用的选择器。

http://jsfiddle.net/zaacj/

Answer 3

我更喜欢添加类，然后使用过渡函数.siblings（）来查找下一个输入...

<script>
    $(function () {
        $("input.ui-spinner").spinner({
            min: 5,
            max: 15000,
            step: 5,
            start: 100,
            numberFormat: "d"
        });
        $(".myCheck").click(function () {
            $(this).siblings(".ui-spinner").val('0').toggle();
        });
    });
</script>
<ul class="checkbox">
  <li>
    <input type="checkbox" class="myCheck" name="cb[1]" value="pepperoni" /><label     for="cb[1]">Pepperoni</label>
    <input class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" />
 </li>
 <li>
    <input type="checkbox" class="myCheck" name="cb[2]" value="sausage" /><label for="cb[2]">Sausage</label>
    <input class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" />
 </li>
 <li>
    <input type="checkbox" class="myCheck" name="cb[3]" value="mushrooms" /><label for="cb[3]">Mushrooms</label>
    <input class="ui-spinner" style="display: none;" name="cspinner" size="5" value="0" readonly="readonly" />
 </li>
</ul>

JQuery - 参数化类

3 个答案: