jQuery选择器按钮

Question

我有这样的表

我需要选择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

使用checkbox并按照您的意愿设置样式（button）。并设置:checked州的样式。

Answer 2

如果您想使用输入，请使用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/

Answer 3

为所有按钮添加类，例如：“markble”。 jQuery的：

$( ".markble" ).click(function() {
  $( this ).toggleClass( "activ-now" );
});

CSS：

.activ-now {
  border-color: black;
  border-style: solid;
  background: yellow;
}

您可以检测所有按类“激活 - 现在”选择的内容。

demo：http://jsfiddle.net/n2RAh/3/