Javascript 如何使用jquery通过选择下拉菜单获取单选按钮值

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

我有几个单选按钮和它们的值。要显示这些值，请使用下拉选择

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

这是你需要的吗

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

---

在评论中找到解释

//更改附加到select和radio元素的事件，如果其中任何一个元素发生更改，将触发此事件 $“选择，输入[type=radio]”。在“更改”功能上{ var selVal=$'select option:selected'.text；//从select获取所选值 var radVal=$'input[type=radio]：checked'.val；//获取选中的无线电值 $'.total'.htmlselVal*radVal//乘法并显示在元素中，或者执行任何您想要的操作 }; 票证类型：

正常： 贵宾： VVip： 成人人数： 1. 2. 3. 4. 5. 6. 7. 8. 9 10 您需要使用：checked。此外，如果select没有值，您还可以将更改添加到收音机和select，并使用isNaN

$'number、.ticket\u type'.changefunction{ var ticketValue=$'。票证类型：选中。val； 变量编号=$'number'.val； var值=票券价值*数字； 如果！isNaNvalue 警戒值； }; 票证类型：

正常： 贵宾： VVip： 成人人数： 选择 1. 2. 3. 4. 5. 6. 7. 8. 9 10 试试这个：

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

更改后的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>

javascript事件处理程序：

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

---

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

显示您迄今为止的尝试以及您想要实现的目标？我不理解这个问题。请检查图像以了解情况。值将显示在哪里？或者你只是需要计算它吗？是的，像这样，但是，单选按钮的值应该乘以所选的值。这正是我需要的。谢谢你的帮助。

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

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