0

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

我的问题是该复选框对应于一个输入字段。我是否必须将复选框编号作为参数解析为函数，以便可以正确调用 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>
4

3 回答 3

1

你可以试试这个——

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

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

于 2013-07-01T18:17:42.667 回答
0 
 $('input[id*="cb"]').click(function () {
            $(this).siblings('input').val('0');
            $(this).siblings('input').toggle();
        });

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

http://jsfiddle.net/zaacj/

于 2013-07-01T18:18:05.537 回答
0

我更喜欢添加类，然后使用过渡函数 .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>
于 2013-07-01T18:25:14.087 回答