How to get radio button value by using select dropdown using jquery

Question

How do i get radio button value by using select options?

I have few radio buttons with their values. To be display those values with dropdown selection

<div class="form-group">
    <p> Ticket Type:</p>
    <label> Normal:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="100" required=""> </label>
    <label> Vip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="200" required=""> </label>
    <label> VVip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="500" required=""> </label>
</div>

<div class="form-group">
    <label> Number Of Adults: </label>
    <label> 
        <select>
            <option>Select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </label>
</div>

Where will the value be displayed? Or do you simply need it to be calculated? — Michael Gaskill
– Michael Gaskill, Commented May 13, 2016 at 9:39

R.75 · Accepted Answer · 2016-05-13 09:44:57Z

1

Is this what you need?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>


<div class="form-group">
    <p> Ticket Type:</p>
    <label> Normal:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="100" required=""> </label>
    <label> Vip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="200" required=""> </label>
    <label> VVip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="500" required=""> </label>
</div>

<div class="form-group">
    <label> Number Of Adults: </label>
    <label> 
        <select id="number">
            <option>Select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </label>
</div>

<script>
var number = $('#number');

number.on('change',function(){
    alert($('.ticket_type:checked').val() * $(this).val());

});
</script>

edited May 13, 2016 at 9:44

answered May 13, 2016 at 9:39

R.75

499 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raj Kumar Jillella Over a year ago

Yeah, like this, but, radio button value should be multiply with selected value.

Raj Kumar Jillella Over a year ago

This is what i need exactly. Thanks for the help.

Guruprasad J Rao · Accepted Answer · 2016-05-13 09:43:59Z

Find the explanation in comments

//Change event attached to both select and radio elements, if any of them gets changed this will be triggered
$('select,input[type=radio]').on('change',function(){
  var selVal=$('select option:selected').text(); //get the selected value from select
  var radVal=$('input[type=radio]:checked').val();//get the checked radio value
  $('.total').html(selVal*radVal) //multiply and display in a element or do whatever you want
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <p> Ticket Type:</p>
    <label> Normal:</label>  <input type="radio" class="ticket_type" name="ticket_type" value="100" required=""> 
    <label> Vip:</label> <input checked type="radio" class="ticket_type" name="ticket_type" value="200" required="">
    <label> VVip:</label> <input type="radio" class="ticket_type" name="ticket_type" value="500" required=""/>
</div>

<div class="form-group">
    <label> Number Of Adults: </label>
    <label> 
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </label>
</div>

<div class="total"></div>

BenG · Accepted Answer · 2016-05-13 09:48:11Z

you need to use :checked. Also you can add the change to both radio and select and use isNaN if the select has no value.

$('#number, .ticket_type').change(function() {

  var ticketValue = $('.ticket_type:checked').val();
  var number = $('#number').val();

  var value = ticketValue * number;

  if (!isNaN(value))
    alert(value);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <p>Ticket Type:</p>
  <label>Normal:</label>
  <label>
    <input type="radio" class="ticket_type" name="ticket_type" value="100" required="">
  </label>
  <label>Vip:</label>
  <label>
    <input type="radio" class="ticket_type" name="ticket_type" value="200" required="">
  </label>
  <label>VVip:</label>
  <label>
    <input type="radio" class="ticket_type" name="ticket_type" value="500" required="">
  </label>
</div>

<div class="form-group">
  <label>Number Of Adults:</label>
  <label>
    <select id="number">
      <option>Select</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </label>
</div>

Jayesh Chitroda · Accepted Answer · 2016-05-13 09:49:49Z

Try this:

<div class="form-group">
    <p> Ticket Type:</p>
    <label> Normal:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="100" required=""> </label>
    <label> Vip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="200" required=""> </label>
    <label> VVip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="500" required=""> </label>
</div>

<div class="form-group">
    <label> Number Of Adults: </label>
    <label> 
        <select id="no_of_adults">
            <option value="">Select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </label>
    <div id="result"></div>
</div>

Jquery:

$('input[type=radio][name=ticket_type]').change(function() {
        var type_amount = $("input[name=ticket_type]:checked").val();
        var no_of_adults = $('#no_of_adults').val();
        if(no_of_adults != '') {
            var amount = type_amount * no_of_adults;
            $("#result").text(amount)
        }
    });

    $('#no_of_adults').change(function() {
        var type_amount = $("input[name=ticket_type]:checked").val();
        if(typeof type_amount != "undefined") {
            var no_of_adults = $(this).val();
            var amount = type_amount * no_of_adults;
            $("#result").text(amount)
        }
    });

Michael Gaskill · Accepted Answer · 2016-05-13 10:08:17Z

The HTML with changes:

<div class="form-group">
    <p> Ticket Type:</p>
    <label> Normal:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="100" required=""> </label>
    <label> Vip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="200" required=""> </label>
    <label> VVip:</label> <label> <input type="radio" class="ticket_type" name="ticket_type" value="500" required=""> </label>
</div>

<div class="form-group">
    <label> Number Of Adults: </label>
    <label> 
        <select id="number-of-adults">
            <option>Select</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </label>
</div>

Added id attributes to the dropdown select.

The javascript calculation:

var calculate_total_cost = function() {
    var ticket_type_val = +$('input[name=ticket_type]:checked').val();
    var number_of_adults = +$('#number-of-adults').val());
    return (isNan(ticket_type_val) ? 0 : ticket_type_val) * (isNan(number_of_adults) ? 0 : number_of_adults);
};

The javascript event handlers:

$('#number, #number-of-adults').change(function(){
    var total_cost = calculate_total_cost();
    if (total_cost > 0) {
        alert("The current cost is: " + total_cost);
    }
});

This will correctly handle recalculation when either the radio buttons or the dropdown select are changed.

Collectives™ on Stack Overflow

How to get radio button value by using select dropdown using jquery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related