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

あなたが:checkedを使用する必要がコメント

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

で説明して下さい。 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); 
    } 
}); 

は、これは正しく再計算を処理します。