如何保持焦点按钮并在窗体上发送按钮焦点？

Question

1. 我想同时选择两个按钮（颜色和大小），并希望它像这样>> 在此输入图像描述 。

2. 我想在表单上发送数据表单焦点按钮。

  function show(elementId) { document.getElementById("id1").style.display="none"; document.getElementById("id2").style.display="none"; document.getElementById("id3").style.display="none"; document.getElementById(elementId).style.display="block"; } 

 .btn:focus{ border-radius: 20px; color:#000; } .btn2:focus{ border-radius: 10px; color:#D97476; } 

 <form name="selectItem" method="POST" action="keepdata.php"> <div class="select-color"> <p>Select color</p> <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button> <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button> <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button> </div> <div class="select-option-s7"> <p>Select Size</p> <button type="button" class="btn2 btn-color black" title="black">S</button> <button type="button" class="btn2 btn-color silver" title="silver">M</button> <button type="button" class="btn2 btn-color silver" title="silver">L</button> </div> <button type="submit">submit</button> </form> 

谢谢

Answer 1

为什么不使用输入type =“ radio”？

使用另一个具有样式的类，并通过jquery在单击按钮上添加类。

 $('.select-color button').on('click', function(){ $('.select-color button.selected').removeClass('selected'); $(this).addClass('selected'); }); $('.select-option-s7 button').on('click', function(){ $('.select-option-s7 button.selected').removeClass('selected'); $(this).addClass('selected'); }); 

 .selected{ border-radius: 10px; color:#D97476; } .btn:focus{ outline: none; } .btn2:focus{ outline: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="selectItem" method="POST" action="keepdata.php"> <div class="select-color"> <p>Select color</p> <button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button> <button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button> <button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button> </div> <div class="select-option-s7"> <p>Select Size</p> <button type="button" class="btn2 btn-color black" title="black">S</button> <button type="button" class="btn2 btn-color silver" title="silver">M</button> <button type="button" class="btn2 btn-color silver" title="silver">L</button> </div> <button type="submit">submit</button> </form>