HTML 使用 jQuery 自定义单选按钮

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 恤 OR 一件衬衫 AND 至少一件短裤数量 OR 裤子。

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

我猜我必须使用 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>

HTML 使用 jQuery 自定义单选按钮

HTML Radio Button Customization with jQuery

html

javascript

css

jquery

radio-button