使用jQuery获取任何变量的输入值

Question

我有一个表单，如果更改了某个输入，我需要执行一个操作。 在我的jQuery中，我将三个输入字段设置为不同的变量，例如：

var workOrderInput = jQuery(".work-order-select input");
var eventSchedulerInput = jQuery(".event-scheduler .gchoice_2_13_0 #choice_2_13_0");
var eventSchedulerSelect = jQuery(".event-scheduler select");

为了找出输入是否更改，我在使用：

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).change(function() {

    });
});

如果输入字段之一发生更改，我想将一个变量设置为隐藏输入字段的值，例如

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).change(function() {
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
});

现在，设置了totalCost变量，但仅在第二次单击时设置。 例如，如果单击“ .work-order-select输入”，则不会发生任何事情。 只有当我单击另一个输入时，变量才会被设置并显示在控制台中。

编辑：这是我的HTML

<form>
    <div class="work-order-select">
        <input type="radio" name="wo1" value="14.99">
        <input type="radio" name="wo2" value="24.99">
        <input type="radio" name="wo2" value="34.99">
    </div>
    <div class="event-scheduler">
        <input type="radio" name="es1" value="44.99">
        <select name="es1" >
            <option value="Square Footage|0">Square Footage</option>
            <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option
            <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option>
            <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option>      
        </select>
    <div>
    <div>
        <span class="total"></span>
        <input type="hidden" id="input_2_22" value="49.99">
    </div>
</form>

现在，一旦选择了其中一个单选按钮，或者下拉列表发生更改，＃input_2_22的输入值就会更新。

使用mouseup（）也可以。。。 如果我使用：

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).mouseup(function() {
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
}); 

选择的第一个单选按钮不返回任何内容。 在Chrome的网络检查器中，这实际上是一个空行。 第二次单击单选按钮时，将显示我单击的上一个单选按钮的值。

编辑2：以上所有问题均已通过以下方式解决：

jQuery("#choice_2_13_0, #choice_2_10_0, #choice_2_10_1, #choice_2_10_2").addClass("discount-class");

jQuery(".discount-class").change(function() {
    setTimeout(function() {
        var totalCost = jQuery(".signup-cost #input_2_22").val();
        var totalDiscount = (totalCost * .2).toFixed(2);
        var afterDiscount = (totalCost - totalDiscount).toFixed(2);
        console.log(totalDiscount);
        jQuery("#input_2_23").val(totalDiscount);
    }, 1000);
});

现在，仅当选择了“ wo”单选按钮之一并且选择值不等于“ Square Footage | 0”时，才需要触发更改功能。 运气不好，我正在尝试：

if (jQuery(".discount-class").is(':checked') && jQuery("#input_2_14").val != 'Square Footage|0') {

Answer 1

由于需要解决许多问题，因此我不确定如何提出此答案。 让我们一次只一行，以下注释基于问题中提供的HTML。

// this matches the first three radio buttons
var workOrderInput = jQuery(".work-order-select input");
// this does not match anything
var eventSchedulerInput = jQuery(".event-scheduler .gchoice_2_13_0 #choice_2_13_0");
// this matches the dropdown
var eventSchedulerSelect = jQuery(".event-scheduler select");

jQuery([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() {
    jQuery(this).mouseup(function() {
        // this selector does not match anything either
        var totalCost = jQuery(".signup-cost #field_2_22 #input_2_22").val();
        console.log(totalCost);
    });
}); 

这是说明上述要点的FIDDLE 。

现在，应用我们学到的知识并修复一些问题。

 jQuery(function ($) { // match radio buttons that are children of an element with the class "work-order-select" var workOrderInput = $(".work-order-select input[type=radio]"), // match radio buttons that are children of an element with the class "event-scheduler" eventSchedulerInput = $(".event-scheduler input[type=radio]"), // match a select element that is the child of an element with the class "event-scheduler" eventSchedulerSelect = $(".event-scheduler select"), // get one element with the id "input_2_22" hiddenInput = $("#input_2_22"); $([workOrderInput, eventSchedulerInput, eventSchedulerSelect]).each(function() { this.on('change', function() { // get the value of the hidden element var totalCost = hiddenInput.val(); // do something with it. alert(totalCost); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <div class="work-order-select" style="border:1px solid black">.work-order-select input[type=radio] <br /> <input type="radio" name="wo1" value="14.99" /> <br />These two radio buttons have a different name <input type="radio" name="wo2" value="24.99" /> <input type="radio" name="wo2" value="34.99" /> </div> <br /> <div class="event-scheduler"> <div style="border:1px solid black">.event-scheduler input[type=radio] <input type="radio" name="radio-es1" value="44.99" /> </div> <br /> <div style="border:1px solid black">.event-scheduler select <select name="select-es1"> <option value="Square Footage|0">Square Footage</option> <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option> <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option> <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option> </select> </div> <div> <div> <span class="total"></span> <input type="hidden" id="input_2_22" value="49.99" /> </div> </div> </div> </form> 

Answer 2

您可能应该给所有元素相同的类，然后以这种方式绑定到它们。

 jQuery('.myElements').change(function() { if (jQuery('#es1').val() != "Square Footage|0") { setTimeout(function() { var totalCost = jQuery("#input_2_22").val(); jQuery('#test').append(totalCost + '<br>') console.log(totalCost); }, 1000); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="work-order-select"> <input type="radio" class="myElements" name="wo1" value="14.99"> <input type="radio" class="myElements" name="wo2" value="24.99"> <input type="radio" class="myElements" name="wo2" value="34.99"> </div> <div class="event-scheduler"> <input type="radio" class="myElements" name="es1" value="44.99"> <select name="es1" id="es1" class="myElements"> <option value="Square Footage|0">Square Footage</option> <option value="Under 50,000($29.00/mt)|29">Under 50,000($29.00/mt)</option <option value="Under 75,000($49.00/mt)|49">Under 75,000($49.00/mt)</option> <option value="Under 100,000($59.00/mt)|59">Under 100,000($59.00/mt)</option> </select> <div> <div> <span class="total"></span> <input type="hidden" id="input_2_22" value="49.99"> </div> </form> <div id="test"></div>