Question

我已经痛苦地解决了这个问题，如果点击该按钮可以增加＆＃34;总计＆＃34;价格与选择的项目数量如下：未选中：demo = selectedQty *价格，如果选中：总计= demo + selectedQty * 1

<?php include include 'includes/head.php';
        $dt = new DateTime("now", new DateTimeZone('Europe/Bucharest'));
        $time_s = $dt->format('Y/m/d, H:i:s');
        ?>
        <?php include 'includes/template_header.php';
        if(isset($_GET['success']) && empty($_GET['success'])) {
            echo 'your order has been placed';
            } else {
                if (empty($_POST) === false && empty($errors) === true) {
                    $place_order = array(
                    'time_s'       => $_POST['time_s'],
                    'user_id'      => $_POST['user_id'],
                    'img_no'       => $_POST['img_no'],
                    'ref_no'       => $_POST['ref_no'],
                    'sha_no'       => $_POST['sha_no'],
                    'lar_no'       => $_POST['lar_no'],
                    'first_name'   => $_POST['first_name'],
                    'last_name'    => $_POST['last_name'],
                    'email'     => $_POST['email'],
                    'phone'     => $_POST['phone'],
                    'website'      => $_POST['website'],
                    'company'      => $_POST['company'],
                    'message'      => $_POST['message']);
                    place_order($place_order); 
                    die("<script>location.href = 'preturi.php?success'</script>");
                    exit();
                } else if (empty($errors) === false) {
                    echo output_errors($errors);
            }?>
        <div id="calculator" style="margin:5%">
        <input id="slider" type="range" min="0" max="1000" value="0" step="1" style="width:100%;" />
        <br />
        <input type="number" id="sliderval" /><br />
        <p id="total" style="display:inline-block">0</p></div>
        <input type="checkbox" class="addon" value="1" />
        <?php if (logged_in() === true){ ?>
        <div style="margin:5%">
        <form action="" method="post" name="comanda">
        <p>
        <input name="time_s" type="text" value="<?php echo $time_s;?>" style="display:none"/></p>
        <p>
        <input name="user_id" type="text" value="<?php echo $user_data['user_id'];?>" style="display:none"/></p>
        <p>
        <input name="last_name" type="text" value="<?php echo $user_data['last_name'];?>" style="display:none"/></p>
        <p>
        <input name="first_name" type="text" value="<?php echo $user_data['first_name'];?>" style="display:none"/></p>
        <p>
        <input name="email" type="text" value="<?php echo $user_data['email'];?>" style="display:none"/></p>
        <p>Telefon:<br />
        <input name="phone" type="text" /></p>
        <p>Website:<br />
        <input name="website" type="text" /></p>
        <p>Companie:<br />
        <input name="company" type="text" /></p>
        <p>
        <input name="img_no" type="number" id="sliderval1" style="display:none"/></p>
        <p>Mesaj:<br />
        <textarea name="message"></textarea></p>
        <p><input type="submit" value="Trimite" />
        <input name="reset" type="reset" value="Reset" /></p>
        </form></div>
        <script>

        $('#sliderval').on('input', function() {
           var selectedQty = $('#sliderval').val();

            $('#slider').val(selectedQty);
            $('#sliderStatus').text(selectedQty);
            calc(selectedQty);
        });
        $('#sliderval').on('input', function() {
           var selectedQty = $('#sliderval').val();
            $('#sliderval1').val(selectedQty);
            $('#sliderStatus').text(selectedQty);
            calc(selectedQty);
        });
        $('#sliderval1').on('input', function() {
           var selectedQty = $('#sliderval1').val();
            $('#slider').val(selectedQty);
            $('#sliderStatus').text(selectedQty);
            calc(selectedQty);
        });
        $('#sliderval1').on('input', function() {
           var selectedQty = $('#sliderval1').val();
            $('#sliderval').val(selectedQty);
            $('#sliderStatus').text(selectedQty);
            calc(selectedQty);
        });
        $("#slider").on('change',function() {
            var selectedQty = $(this).val();
            $('#sliderStatus').text(selectedQty);
            $('#sliderval').val(selectedQty);
            calc(selectedQty);
        });  
        $("#slider").on('change',function() {
            var selectedQty = $(this).val();
            $('#sliderStatus').text(selectedQty);
            $('#sliderval1').val(selectedQty);
            calc(selectedQty);
        });  
        function calc(selectedQty) {
          var itemTotal = 0;
             switch (true) {
                case (selectedQty <= 2) :
                    itemTotal = 6.5 * selectedQty;
                    break;
                case (selectedQty <= 5) :
                    itemTotal = 5.9 * selectedQty;
                    break;
                case (selectedQty <= 15) :
                    itemTotal = 5.5 * selectedQty;
                    break;
                case (selectedQty <= 30) :
                    itemTotal = 5 * selectedQty;
                    break;
                case (selectedQty <= 60) :
                    itemTotal = 4.5 * selectedQty;
                    break;
                case (selectedQty <= 100) :
                    itemTotal = 4 * selectedQty;
                    break;
                case (selectedQty <= 200) :
                    itemTotal = 3.6 * selectedQty;
                    break;  
                case (selectedQty <= 500) :
                    itemTotal = 3.4 * selectedQty;
                    break;       
                default:
                    itemTotal = 3.2 * selectedQty;
                    break;
            }
            $('#demo').text(itemTotal);
        }

        <?  }else{ echo '<div style="margin:5%">Pentru a plasa comanda trebuie sa inregistrat si autentificat.</div>';}?>

          </script>
        <?php } include 'includes/template_footer.php';?>

Answer 1

在JsFiddle中，您似乎已经实现了所需的行为。请点击链接并查看。

以下代码已添加到您的javascript文件中以实现此行为。

$(".addon").change(function() {
    if(this.checked) {
   $('#total').text(itemTotal);  
    }

Answer 2

首先要做的事情：

<?  }else{ echo '<div style="margin:5%">Pentru a plasa comanda trebuie sa  inregistrat si autentificat.</div>';}?>

</script>

echo无效Javascript。不起作用。您需要从</script>结束标记中获取回声。

现在回答问题的前端部分。

你走了。我在复选框中添加了一个id，然后更改了所需的元素，不仅在移动复选框时检查了它，而且还移动滑块然后单击复选框。

请参阅Fiddle。

请注意，未选中时会将总数输入demo，选中时会将总数设为total。

<强> HTML

<div id="calculator" style="margin:5%">
<input id="slider" type="range" min="0" max="1000" value="0" step="1" style="width:100%;" /> <!-- quantity -->
<input type="number" id="sliderval" /> <!-- quantity -->
<input id="checker" type="checkbox" class="addon" value="1" /> <!-- this one -->
<p id="total" style="display:inline-block">0</p> <!-- total -->
</div>

<强> JQUERY

/***NEW CODE BELOW***/
$('#checker').click(function(){
  var selectedQty = $('#sliderval').val();
  $('#slider').val(selectedQty);
  $('#sliderStatus').text(selectedQty);
  var val = calc(selectedQty);
  if($('#checker').prop('checked')){ 
    val += Number(selectedQty);
    $('#total').text(val); 
    }
  else{          
      $('#demo').text(val);
  }  
 });
/***NEW CODE ABOVE***/

$('#sliderval').on('input', function () {
  var selectedQty = $('#sliderval').val();
  $('#slider').val(selectedQty);
  $('#sliderStatus').text(selectedQty);
  calc(selectedQty);
});
$('#sliderval').on('input', function () {
  var selectedQty = $('#sliderval').val();
  $('#sliderval1').val(selectedQty);
  $('#sliderStatus').text(selectedQty);
  calc(selectedQty);
});
$('#sliderval1').on('input', function () {
  var selectedQty = $('#sliderval1').val();
  $('#slider').val(selectedQty);
  $('#sliderStatus').text(selectedQty);
  calc(selectedQty);
});
$('#sliderval1').on('input', function () {
  var selectedQty = $('#sliderval1').val();
  $('#sliderval').val(selectedQty);
  $('#sliderStatus').text(selectedQty);
  calc(selectedQty);
});
$("#slider").on('change', function () {
  var selectedQty = $(this).val();
  $('#sliderStatus').text(selectedQty);
  $('#sliderval').val(selectedQty);
calc(selectedQty);
});
$("#slider").on('change', function () {
  var selectedQty = $(this).val();
  $('#sliderStatus').text(selectedQty);
  $('#sliderval1').val(selectedQty);
calc(selectedQty);
});

function calc(selectedQty) {
var itemTotal = 0;
switch (true) {
    case (selectedQty <= 2):
        itemTotal = 6.5 * selectedQty;
        break;
    case (selectedQty <= 5):
        itemTotal = 5.9 * selectedQty;
        break;
    case (selectedQty <= 15):
        itemTotal = 5.5 * selectedQty;
        break;
    case (selectedQty <= 30):
        itemTotal = 5 * selectedQty;
        break;
    case (selectedQty <= 60):
        itemTotal = 4.5 * selectedQty;
        break;
    case (selectedQty <= 100):
        itemTotal = 4 * selectedQty;
        break;
    case (selectedQty <= 200):
        itemTotal = 3.6 * selectedQty;
        break;
    case (selectedQty <= 500):
        itemTotal = 3.4 * selectedQty;
        break;
    default:
        itemTotal = 3.2 * selectedQty;
        break;
}

/***NEW CODE BELOW***/
  if($('#checker').prop('checked')){
      $('#total').text(itemTotal);
    }
  else{    
      $('#demo').text(itemTotal);
  }
/***NEW CODE ABOVE***/
return itemTotal;
}

Answer 3

感谢@ A.Sharma，他的回答是99.99％的钱，但指出我错过了什么。他的回答+一个小调整。我敢打赌，我没有把这个问题解释得很好，否则他会在第一次尝试时将其钉住。 JSFiddle

<div id="calculator" style="margin:5%">
    <input id="slider" type="range" min="0" max="1000" value="0" step="1" style="width:100%;" /> <!-- quantity -->
    <input type="number" id="sliderval" /> <!-- quantity -->
    <input id="checker" type="checkbox" class="addon" value="1" /> <!-- this one -->
    <p id="demo" style="display:inline-block">0</p> <!-- total -->
</div>

<script>
$('#checker').click(function(){
  var selectedQty = $('#sliderval').val();
  $('#slider').val(selectedQty);
  $('#sliderStatus').text(selectedQty);
  calc(selectedQty);

  if($('#checker').prop('checked')){ 
    $('#total').text(itemTotal); 
    }
  else{          
      $('#demo').text(itemTotal);
  }  
});

$('#sliderval').on('input', function() {
   var selectedQty = $('#sliderval').val();

    $('#slider').val(selectedQty);
    $('#sliderStatus').text(selectedQty);
    calc(selectedQty);
});
$('#sliderval').on('input', function() {
   var selectedQty = $('#sliderval').val();
    $('#sliderval1').val(selectedQty);
    $('#sliderStatus').text(selectedQty);
    calc(selectedQty);
});
$('#sliderval1').on('input', function() {
   var selectedQty = $('#sliderval1').val();
    $('#slider').val(selectedQty);
    $('#sliderStatus').text(selectedQty);
    calc(selectedQty);
});
$('#sliderval1').on('input', function() {
   var selectedQty = $('#sliderval1').val();
    $('#sliderval').val(selectedQty);
    $('#sliderStatus').text(selectedQty);
    calc(selectedQty);
});
$("#slider").on('change',function() {
    var selectedQty = $(this).val();
    $('#sliderStatus').text(selectedQty);
    $('#sliderval').val(selectedQty);
    calc(selectedQty);
});  
$("#slider").on('change',function() {
    var selectedQty = $(this).val();
    $('#sliderStatus').text(selectedQty);
    $('#sliderval1').val(selectedQty);
    calc(selectedQty);
});  
function calc(selectedQty) {
  var itemTotal = 0;
     switch (true) {
        case (selectedQty <= 2) :
            itemTotal = 6.5 * selectedQty;
            break;
        case (selectedQty <= 5) :
            itemTotal = 5.9 * selectedQty;
            break;
        case (selectedQty <= 15) :
            itemTotal = 5.5 * selectedQty;
            break;
        case (selectedQty <= 30) :
            itemTotal = 5 * selectedQty;
            break;
        case (selectedQty <= 60) :
            itemTotal = 4.5 * selectedQty;
            break;
        case (selectedQty <= 100) :
            itemTotal = 4 * selectedQty;
            break;
        case (selectedQty <= 200) :
            itemTotal = 3.6 * selectedQty;
            break;  
        case (selectedQty <= 500) :
            itemTotal = 3.4 * selectedQty;
            break;       
        default:
            itemTotal = 3.2 * selectedQty;
            break;
    }
    if($('#checker').prop('checked')){
          $('#demo').text(itemTotal + selectedQty * 1);
        }
      else{    
          $('#demo').text(itemTotal);
      }
}
</script>

复选框总价更新

3 个答案: