使用 Jquery 查找 1 个复选框选择的两个输入值？答案

【问题标题】：Using Jquery to find two input values for 1 checkbox selection?使用 Jquery 查找 1 个复选框选择的两个输入值？
【发布时间】：2017-06-07 23:00:27
【问题描述】：

我需要从 1 个复选框中检索两个值，“价格和重量”。我为此使用 Jquery Mobile CSS。

我简化了代码并尽可能多地写出来。我不知道如何处理这个问题。

单击框后，我需要在两个单独的 div 中输出。我将使用结果传递给 simplecartJS。

我的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST LIST</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="simpleCart.js"></script>
</head>
<body>
<fieldset id="" class="" style="margin-top: 0px;font-variant: small-caps;letter-spacing: 2px;" data-role="controlgroup">

    <input class="weight1" type="hidden" value="2.0" >
    <input class="price1" type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="20.00" checked="checked">
    <label class="price_weight_lable1" style="display: flex;" for="radio-choice-v-2a">
        <div style="flex:2;">2.0 grams</div>
        <div style="flex:1;text-align: center;">$22.00</div>
    </label>


    <input class="weight2" type="hidden" value="3.5" >
    <input class="price2" type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="45.00">
    <label class="price_weight_lable2" style="display: flex;" for="radio-choice-v-2b">
        <div style="flex:2;">3.5 grams</div>
        <div style="flex:1;text-align: center;">$45.00</div>
    </label>


   <input class="weight3" type="hidden" value="7.0" >
    <input class="price3" type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="90.00">
    <label class="price_weight_lable3" style="display: flex;" for="radio-choice-v-2c">
        <div style="flex:2;">7.0 grams</div>
        <div style="flex:1;text-align: center;">$90.00</div>
  </label>  
</fieldset>

    <script>
     var price_results;
     var weight_results;

        $("????").click(function(){
        ????            
});

        $(".price_results").html( price_results );
        $(".weight_results").html( weight_results );
    </script>




<div class="simpleCart_shelfItem">


    <div class="item_price"> <!-- simplecart div -->    
        <div class="price_results"></div> <!-- price function result? -->                          
    </div>

     <div class="item_weight"> <!-- simplecart div -->   
        <div class="weight_results"></div>   <!-- weight function result? -->                        
    </div>


</div>

</body>
</html>

复制粘贴。

这是我的页面 www.aarontomlinson.com

谢谢！！！

【问题讨论】：

标签： javascript jquery jquery-mobile simplecart

【解决方案1】：

试试这个，应该对你有用，

$('input[type=radio]').on( 'change', function(el){
  $( '.price_results' ).text( $(this).parent().prev().val() );
  $( '.weight_results' ).text( $(this).val() );
});

<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<fieldset id="" class="" style="margin-top: 0px;font-variant: small-caps;letter-spacing: 2px;" data-role="controlgroup">

    <input class="weight1" type="hidden" value="2.0" >
    <input class="price1" type="radio" name="radio-choice-v-2" id="radio-choice-v-2a" value="20.00" checked="checked">
    <label class="price_weight_lable1" style="display: flex;" for="radio-choice-v-2a">
        <div style="flex:2;">2.0 grams</div>
        <div style="flex:1;text-align: center;">$22.00</div>
    </label>


    <input class="weight2" type="hidden" value="3.5" >
    <input class="price2" type="radio" name="radio-choice-v-2" id="radio-choice-v-2b" value="45.00">
    <label class="price_weight_lable2" style="display: flex;" for="radio-choice-v-2b">
        <div style="flex:2;">3.5 grams</div>
        <div style="flex:1;text-align: center;">$45.00</div>
    </label>


   <input class="weight3" type="hidden" value="7.0" >
    <input class="price3" type="radio" name="radio-choice-v-2" id="radio-choice-v-2c" value="90.00">
    <label class="price_weight_lable3" style="display: flex;" for="radio-choice-v-2c">
        <div style="flex:2;">7.0 grams</div>
        <div style="flex:1;text-align: center;">$90.00</div>
  </label>  
</fieldset>


<div class="simpleCart_shelfItem">


    <div class="item_price"> <!-- simplecart div -->    
        <div class="price_results"></div> <!-- price function result? -->                          
    </div>

     <div class="item_weight"> <!-- simplecart div -->   
        <div class="weight_results"></div>   <!-- weight function result? -->                        
    </div>


</div>

【讨论】：

确实有效，是否有在页面加载时选择第一个框的值？如果他们不点击任何东西，比如默认值？非常感谢。 @克雷西米尔·彭迪克
也..结果是倒退的..我得到了价格的重量..我会试着解决它，但如果你知道一个快速的方法吗？ @kresimir pendic
我修复了排序问题，仍然致力于“在页面加载时获取结果”。 @Kresimir Pendic