关于input的一个效果的问题。

Question

jsclassinput

Answer 1

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.sel{background:red;}
</style>
<tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择胆码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="dan"  ></td>
  </tr>
   <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择拖码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="tuo"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>胆码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi">&nbsp;</td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>
 
 <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>拖码选择区：</strong></span></td>
  <tr>
    <td height="40" class="shuzi">&nbsp;</td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num1">
      <input type="button" value="02" name="num1">
      <input type="button" value="03" name="num1">
      <input type="button" value="04" name="num1">
      <input type="button" value="05" name="num1">
      <input type="button" value="06" name="num1">
      <input type="button" value="07" name="num1">
      <input type="button" value="08" name="num1">
      <input type="button" value="09" name="num1">
      <input type="button" value="10" name="num1">
      <input type="button" value="11" name="num1">
      <input type="button" value="12" name="num1">
      <input type="button" value="13" name="num1">
      <input type="button" value="14" name="num1">
      <input type="button" value="15" name="num1"></td>
  </tr>
 
<script>
  function f(){
    $('input[name=dan]').val($('input[name=num].sel').map(function(){return this.value}).get().join(','));
    $('input[name=tuo]').val($('input[name=num1].sel').map(function(){return this.value}).get().join(','))
  }
  $('input[name=num]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num1][value='+this.value+']').removeClass('sel');
    }
    f();
});
  $('input[name=num1]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else{
      t.addClass('sel');
       $('input[name=num][value='+this.value+']').removeClass('sel');
    }
    f();
});
</script>

Answer 2

大神，问一下这样的话如何定义一开始按钮的样式呢，我加上样式.shuzi input {
background-color: #D3DBC4;
border-radius: 12px;
border: 0;
padding: 0;｝后改变颜色的效果就没有了。去掉这个样式那按钮就太难看了。 

Answer 3

大神，问一下这样的话如何定义一开始按钮的样式呢，我加上样式.shuzi input {
background-color: #D3DBC4;
border-radius: 12px;
border: 0;
padding: 0;｝后改变颜色的效果就没有了。去掉这个样式那按钮就太难看了。 自己把一开始定义的颜色删掉了竟然就可以了。但是，如何限制胆码的个数呢？

Answer 4

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
  input[type=button]{background:#ccc;}
input.sel{background:red;}
</style>
<tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择胆码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="dan"  ></td>
  </tr>
   <tr>
    <td width="14%" height="40" align="right" nowrap=""><span lang="zh-cn">请选择拖码：</span></td>
    <td width="100%" height="40"><input type="text" style="width:100%" name="tuo"  ></td>
  </tr>
  <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>胆码选择区：</strong></span></td>
  </tr>
  <tr>
    <td height="40" class="shuzi">&nbsp;</td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num">
      <input type="button" value="02" name="num">
      <input type="button" value="03" name="num">
      <input type="button" value="04" name="num">
      <input type="button" value="05" name="num">
      <input type="button" value="06" name="num">
      <input type="button" value="07" name="num">
      <input type="button" value="08" name="num">
      <input type="button" value="09" name="num">
      <input type="button" value="10" name="num">
      <input type="button" value="11" name="num">
      <input type="button" value="12" name="num">
      <input type="button" value="13" name="num">
      <input type="button" value="14" name="num">
      <input type="button" value="15" name="num"></td>
  </tr>
  
 <tr>
    <td height="40" colspan="5" align="center" class="shuzi"><span class="red" ><strong>拖码选择区：</strong></span></td>
  <tr>
    <td height="40" class="shuzi">&nbsp;</td>
    <td height="40" colspan="4" class="shuzi">
      <input type="button" value="01" name="num1">
      <input type="button" value="02" name="num1">
      <input type="button" value="03" name="num1">
      <input type="button" value="04" name="num1">
      <input type="button" value="05" name="num1">
      <input type="button" value="06" name="num1">
      <input type="button" value="07" name="num1">
      <input type="button" value="08" name="num1">
      <input type="button" value="09" name="num1">
      <input type="button" value="10" name="num1">
      <input type="button" value="11" name="num1">
      <input type="button" value="12" name="num1">
      <input type="button" value="13" name="num1">
      <input type="button" value="14" name="num1">
      <input type="button" value="15" name="num1"></td>
  </tr>
  
 
 
<script>
  function f(){
    $('input[name=dan]').val($('input[name=num].sel').map(function(){return this.value}).get().join(','));
    $('input[name=tuo]').val($('input[name=num1].sel').map(function(){return this.value}).get().join(','))
  }
  $('input[name=num]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else if($('input[name=num].sel').length<5){
      t.addClass('sel');
       $('input[name=num1][value='+this.value+']').removeClass('sel');
    }
    f();
});
  $('input[name=num1]').click(function(){
  var t=  $(this);
    if(t.hasClass('sel'))t.removeClass('sel');
    else if($('input[name=num1].sel').length<20){
      t.addClass('sel');
       $('input[name=num][value='+this.value+']').removeClass('sel');
    }
    f();
});
</script>