如何通過使用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

查找評論

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

Answer 3

你需要使用 :checked

的解釋。如果select沒有任何價值，您也可以將change添加到radio和select，並使用isNaN。

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

當或者單選按鈕或下拉列表中選擇被改變這將正確地處理重新計算。