HTML Radio Button Customization with 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>

So you are to chose T-shirt + Shirt and then Shorts + Pants on this sample store.

I want to make it so the customer has to pick at least a T-Shirt OR a Shirt AND at least a pair of Shorts OR Pants.

At least one item above the horizontal line and at least one item below the horizontal line has to be picked.

I am guessing I have to use jQuery to force this?

I'd suggest make the name to same in your OR logic, and add checked to anyone radio in each group to achieve the AND logic. — fuyushimoya
– fuyushimoya, Commented Aug 8, 2015 at 18:55

Chaya Sandamali · Accepted Answer · 2015-08-08 19:11:28Z

You can perform a check when a submission happens. Here I have used a submit button and validate the inputs upon clicking it. Also I have changed the name attributes of the NO options so that those options won't affect the selection.

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>

This looks like what I needed! I will give this a try. Thank you!

Collectives™ on Stack Overflow

HTML Radio Button Customization with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related