Fatal编程技术网
  • javascript/
  • Javascript 动态获取单选按钮结果

Javascript 动态获取单选按钮结果

javascript php jquery html ajax

Javascript 动态获取单选按钮结果,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在使用joomla，在我的文章中有一个模板覆盖来显示交易。 交易存储在sql数据库中，因此我使用php检索存储的信息。见下文： $query->clear(); $query->select('*'); $query->from($db->quoteName('#__deal_option')); $query->where($db->quoteName('deal_id')." = ".$cmgbstore_id ." AND (". $db->q

我正在使用joomla，在我的文章中有一个模板覆盖来显示交易。 交易存储在sql数据库中，因此我使用php检索存储的信息。见下文：

$query->clear();
$query->select('*');
$query->from($db->quoteName('#__deal_option'));
$query->where($db->quoteName('deal_id')." = ".$cmgbstore_id ." AND (". $db->quoteName('option_id')." = 1 OR 2 OR 3)");

$db->setQuery($query);
$db->execute();
$num_rows = $db->getNumRows();
交易有多个选项，因此我使用以下方法检索交易：

$row = $db->loadRowList();
$opt1_id = $row['0']['2'];
$opt1_o_price = $row['0']['4'];
$opt1_d_price = $row['0']['5'];
$opt1_title = $row['0']['3'];
$opt1_save = $opt1_o_price-$opt1_d_price;
相同的代码用于通过更改行来检索其他选项，并存储到相同的变量中，但数字更改（例如选项2的id）将存储在$opt2_id中

我的问题是，我需要用户能够选择他们想要的选项，并在网站上动态更新，而无需使用提交按钮。基本上，当选择该选项时，价格会自动更新

为了解决这个问题，我使用了一个选择的收音机框。见下面的代码：

<div class="product-options-contain">
    <?php
    if ($num_rows >= '1') {
    ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "1" name="product-option" class="radio" checked="checked">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt1_title ?></span>
            <span class="option-price">R<?php echo $opt1_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt1_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt1_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>
    <?php   
    if ($num_rows >= '2') {
    ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "2" name="product-option" class="radio">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt2_title ?></span>
            <span class="option-price">R<?php echo $opt2_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt2_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt2_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>                                  
    <?php   
    if ($num_rows >= '3') { ?>
    <div class="product-options">
        <div class="option-input">
            <input type="radio" value= "3" name="product-option" class="radio">
        </div>
        <label class="option-detail">
            <span class="option-title"><?php echo $opt3_title ?></span>
            <span class="option-price">R<?php echo $opt3_o_price ?></span>
            <span class="option-was-price">R<?php echo $opt3_d_price ?></span>
            <span class="option-discount">Save R<?php echo $opt3_save .'.00'?></span>
            <span class="option-bought">Over 31 bought</span>
        </label>
    </div>
    <?php   
    }
    ?>
</div>
老实说，我甚至不知道它是怎么工作的

我真的需要帮助，任何帮助都将不胜感激。

因为看起来您正在后端计算所有内容，所以您只需将属性放在每个收音机的数据字段中即可。下面是一个静态值的示例

下面是一个演示：

希望这就是您要寻找的：

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "1" name="product-option" class="radio item" data-sku="1001" data-price="100" data-discount="20" data-save="20" data-after="80" />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title One</span>
    <span class="option-price">R100</span>
    <span class="option-was-price">R80</span>
    <span class="option-discount">Save R20</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "2" name="product-option" class="radio item" data-sku="1002" data-price="200" data-discount="25" data-save="25" data-after="150"  />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title Two</span>
    <span class="option-price">R200</span>
    <span class="option-was-price">R150</span>
    <span class="option-discount">Save R50</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<input type="hidden" name="sku" value="" />
<div id="pricing"></div>
<div id="savings"></div>
<div id="discount"></div>

<script>
$(function(){
    $('.item').on('change',function(){
        $('#pricing').text('R'+($(this).data('price')));
        $('#savings').text('R'+($(this).data('after')));
        $('#discount').text(($(this).data('discount'))+'% OFF');
        $('input[name=sku]').val($(this).data('sku'));
    });
});
</script>
当您说需要获取单选按钮值时，您需要在提交表单之前还是之后获取它们？如果是以前，PHP是完全不相关的——您只需要将：checked伪选择器元素作为目标，并获取其.value，而不需要AJAX。有一个用产品选项代替性别的例子。如果您在提交后需要该值，只需从数据库中回显结果即可，这可能需要AJAX调用，具体取决于您希望何时显示数据库数据。@ObsidManager之前需要该值，因为用户必须在单击“购买”链接之前查看信息，例如价格。我之所以提到PHP，是因为其他信息（如价格）是使用PHP更新的。我的意思是，收音机盒的值，例如3，将用于参考显示的价格，使用$折扣价格。如果值为2，则$折扣价格必须随之改变。@Obsidiage我希望做的一个示例可以在这里找到，您可以选择两个选项，选择一个选项可以更新价格，而无需提交任何内容或重新加载页面。非常感谢！简单而有效。 
$(function () {
    $('.product-options input:first').attr('checked', 'checked');
})

$(document).on('change', '.product-options input', function () {
    var productId = $(this).attr('data-productId');
    var price = $(this).attr('data-price')
    var discount = $(this).attr('data-discount')
    var save = $(this).attr('data-save')
    $('[data-id]').attr('data-id', productId);
    $('.savings .value.selling-price .value-amount').html(price);
    $('.savings .value.discount .value-amount').html(discount);
    $('.savings .value.save .value-amount').html(save);
})

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "1" name="product-option" class="radio item" data-sku="1001" data-price="100" data-discount="20" data-save="20" data-after="80" />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title One</span>
    <span class="option-price">R100</span>
    <span class="option-was-price">R80</span>
    <span class="option-discount">Save R20</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<div class="product-options">
  <div class="option-input">
    <input type="radio" value= "2" name="product-option" class="radio item" data-sku="1002" data-price="200" data-discount="25" data-save="25" data-after="150"  />
  </div>
  <label class="option-detail">
    <span class="option-title">Item Title Two</span>
    <span class="option-price">R200</span>
    <span class="option-was-price">R150</span>
    <span class="option-discount">Save R50</span>
    <span class="option-bought">Over 31 bought</span>
  </label>
</div>

<input type="hidden" name="sku" value="" />
<div id="pricing"></div>
<div id="savings"></div>
<div id="discount"></div>

<script>
$(function(){
    $('.item').on('change',function(){
        $('#pricing').text('R'+($(this).data('price')));
        $('#savings').text('R'+($(this).data('after')));
        $('#discount').text(($(this).data('discount'))+'% OFF');
        $('input[name=sku]').val($(this).data('sku'));
    });
});
</script>