如何使用jquery使用选择下拉列表获取单选按钮值

Question

如何使用选择选项获取单选按钮值？

我的数字单选按钮很少。要使用下拉选择显示这些值

<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>

Answer 1

这是你需要的吗？

<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>

Answer 2

在评论中找到解释

＆＃13;

＆＃13;

//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
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要使用:checked。另外，如果change没有值，您可以将radio添加到select和isNaN，并使用select。

$('#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>

Answer 4

试试这个：

<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)
        }
    });

Answer 5

带有更改的HTML：

<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>

在下拉列表中添加了id属性。

javascript计算：

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);
};

javascript事件处理程序：

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

当单选按钮或下拉选择更改时，这将正确处理重新计算。