javascript - jQuery 选择器按钮

Question

我有这样的 table

我需要选择 7 个按钮等等。最小值和最大值。

喜欢 type="checkbox"或 type="radio"但使用 type="button"(用 css/css3 做样式按钮)

<div class="button">
    <table>
        <tr>
            <td>
                <input type="button" id="button1" name="1" value="01" />
                <input type="button" id="button1" name="2" value="02" />
                <input type="button" id="button1" name="3" value="03" />
                <input type="button" id="button1" name="4" value="04" />
                <input type="button" id="button1" name="5" value="05" />
                <input type="button" id="button1" name="6" value="06" />
                <input type="button" id="button1" name="7" value="07" />
                <input type="button" id="button1" name="8" value="08" />
                <input type="button" id="button1" name="9" value="09" />
                <input type="button" id="button1" name="10" value="10" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="button1" name="11" value="11" />
                <input type="button" id="button1" name="12" value="12" />
                <input type="button" id="button1" name="13" value="13" />
                <input type="button" id="button1" name="14" value="14" />
                <input type="button" id="button1" name="15" value="15" />
                <input type="button" id="button1" name="16" value="16" />
                <input type="button" id="button1" name="17" value="17" />
                <input type="button" id="button1" name="18" value="18" />
                <input type="button" id="button1" name="19" value="19" />
                <input type="button" id="button1" name="20" value="20" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="button1" name="21" value="21" />
                <input type="button" id="button1" name="22" value="22" />
                <input type="button" id="button1" name="23" value="23" />
                <input type="button" id="button1" name="24" value="24" />
                <input type="button" id="button1" name="25" value="25" />
                <input type="button" id="button1" name="26" value="26" />
                <input type="button" id="button1" name="27" value="27" />
                <input type="button" id="button1" name="28" value="28" />
                <input type="button" id="button1" name="29" value="29" />
                <input type="button" id="button1" name="30" value="30" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="button1" name="31" value="31" />
                <input type="button" id="button1" name="32" value="32" />
                <input type="button" id="button1" name="33" value="33" />
                <input type="button" id="button1" name="34" value="34" />
                <input type="button" id="button1" name="35" value="35" />
                <input type="button" id="button1" name="36" value="36" />
                <input type="button" id="button1" name="37" value="37" />
                <input type="button" id="button1" name="38" value="38" />
                <input type="button" id="button1" name="39" value="39" />
                <input type="button" id="button1" name="40" value="40" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="button1" name="41" value="41" />
                <input type="button" id="button1" name="42" value="42" />
                <input type="button" id="button1" name="43" value="43" />
                <input type="button" id="button1" name="44" value="44" />
                <input type="button" id="button1" name="45" value="45" />
                <input type="button" id="button1" name="46" value="46" />
                <input type="button" id="button1" name="47" value="47" />
                <input type="button" id="button1" name="48" value="48" />
                <input type="button" id="button1" name="49" value="49" />
                <input type="button" id="button1" name="50" value="50" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="button1" name="51" value="51" />
                <input type="button" id="button1" name="52" value="52" />
                <input type="button" id="button1" name="53" value="53" />
                <input type="button" id="button1" name="54" value="54" />
                <input type="button" id="button1" name="55" value="55" />
                <input type="button" id="button1" name="56" value="56" />
                <input type="button" id="button1" name="57" value="57" />
                <input type="button" id="button1" name="58" value="58" />
                <input type="button" id="button1" name="59" value="59" />
                <input type="button" id="button1" name="60" value="60" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="button1" name="61" value="61" />
                <input type="button" id="button1" name="62" value="62" />
                <input type="button" id="button1" name="63" value="63" />
                <input type="button" id="button1" name="64" value="64" />
                <input type="button" id="button1" name="65" value="65" />
                <input type="button" id="button1" name="66" value="66" />
                <input type="button" id="button1" name="67" value="67" />
                <input type="button" id="button1" name="68" value="68" />
                <input type="button" id="button1" name="69" value="69" />
                <input type="button" id="button1" name="70" value="70" />
            </td>
        </tr>
    </table>
</div>

这是例子 http://jsfiddle.net/n2RAh/ (现在我只能选择一个)

Answer 1

如果您想使用输入，请使用 JavaScript 而不是 CSS。

使用 jQuery，您可以添加“焦点”类。

$(".button input[type=button]").click(function () {
  $(this).toggleClass("focus"); 
});

$("#HS").click(function () { // Add an input
  var array = []
  $(".button input[type=button].focus").each(function () {
    array.push($(this).val());
  });
  console.log(array.join(", "));
});

参见:http://jsfiddle.net/Dp8tR/

旧的解决方案:

$("input[type=button]").click(function () {
  $(this).toggleClass("focus"); 
});

参见:http://jsfiddle.net/TTL8d/