基于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按钮，并在单击它时验证输入。此外，我还更改了name选项的NO属性，以便这些选项不会影响所选内容。

​

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>

​