使用jQuery的HTML单选按钮自定义

Question

 <input type="radio" name="tshirt" value="1" ><label>T-Shirt-1</label><br> <input type="radio" name="tshirt" value="2" ><label>T-Shirt-2</label><br> <input type="radio" name="tshirt" value="3" ><label>T-Shirt-3</label><br> <input type="radio" name="tshirt" value="4" ><label>No T-Shirt</label><br><br> <input type="radio" name="shirt" value="1" ><label>Shirt-1</label><br> <input type="radio" name="shirt" value="2" ><label>Shirt-2</label><br> <input type="radio" name="shirt" value="3" ><label>No Shirt</label><br><br> <hr> <br> <input type="radio" name="shorts" value="1" ><label>Shorts-1</label><br> <input type="radio" name="shorts" value="2" ><label>Shorts-2</label><br> <input type="radio" name="shorts" value="3" ><label>Shorts-3</label><br> <input type="radio" name="shorts" value="4" ><label>Shorts-4</label><br> <input type="radio" name="shorts" value="5" ><label>No Shorts</label><br><br> <input type="radio" name="pants" value="1" ><label>Pants-1</label><br> <input type="radio" name="pants" value="2" ><label>Pants-2</label><br> <input type="radio" name="pants" value="3" ><label>No Pants</label><br><br> 

因此，您将在此样本商店中选择T恤+衬衫，然后选择短裤+裤子。

我要做到这一点，以便客户必须至少选择T恤或衬衫，以及至少一双短裤或裤子。

必须选择水平线以上的至少一项和水平线以下的至少一项。

我猜我必须使用jQuery来强制执行此操作？

Answer 1

您可以在提交时进行检查。 在这里，我使用了一个submit按钮，并在单击它时验证了输入。 另外，我还更改了NO选项的name属性，以使这些选项不会影响选择。

 var tshirtSelected = false; var shirtSelected = false; var shortSelected = false; var pantSelected = false; $("#myBtn").click(function() { $("input[name='tshirt']").each(function(i, obj) { if ($(this).is(':checked')) { tshirtSelected = true; } }); if (!tshirtSelected) { $("input[name='shirt']").each(function(i, obj) { if ($(this).is(':checked')) { shirtSelected = true; } }); } if (!(shirtSelected || tshirtSelected)) { alert("Please select a tshirt or a shirt!!!!"); } $("input[name='shorts']").each(function(i, obj) { if ($(this).is(':checked')) { shortSelected = true; } }); if (!shortSelected) { $("input[name='pants']").each(function(i, obj) { if ($(this).is(':checked')) { pantSelected = true; } }); } if (!(shortSelected || pantSelected)) { alert("Please select a short or a pant!!!!"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input type="radio" name="tshirt" value="1"> <label>T-Shirt-1</label> <br> <input type="radio" name="tshirt" value="2"> <label>T-Shirt-2</label> <br> <input type="radio" name="tshirt" value="3"> <label>T-Shirt-3</label> <br> <input type="radio" name="no-tshirt" value="4"> <label>No T-Shirt</label> <br> <br> <input type="radio" name="shirt" value="1"> <label>Shirt-1</label> <br> <input type="radio" name="shirt" value="2"> <label>Shirt-2</label> <br> <input type="radio" name="no-shirt" value="3"> <label>No Shirt</label> <br> <br> <hr> <br> <input type="radio" name="shorts" value="1"> <label>Shorts-1</label> <br> <input type="radio" name="shorts" value="2"> <label>Shorts-2</label> <br> <input type="radio" name="shorts" value="3"> <label>Shorts-3</label> <br> <input type="radio" name="shorts" value="4"> <label>Shorts-4</label> <br> <input type="radio" name="no-shorts" value="5"> <label>No Shorts</label> <br> <br> <input type="radio" name="pants" value="1"> <label>Pants-1</label> <br> <input type="radio" name="pants" value="2"> <label>Pants-2</label> <br> <input type="radio" name="no-pants" value="3"> <label>No Pants</label> <br> <br> <button id="myBtn">OK</button>