javascript - 使用 jquery/javascript 的充电选项。 'Math' 逻辑

Question

我正在尝试实现一个广告系统，该系统将根据用户的喜好向他们收费。默认情况下，如果用户未选择任何选项，他们的广告将在所有设备上展示。仅当他们选择特定设备时我才会向他们收费。

如果用户选择移动设备，则会显示“ios”、“android”和“Windows Phone”复选框。每个选项都是 1 美元。因此，如果用户选择移动和 iOS，则会收取 2 美元，以此类推。如果用户选择所有选项，则费用为 0.00 美元，因为默认情况下，他们的广告将在所有设备上展示，而且我不收取一分钱。

另外，最后一个条件是:如果我点击“Mobile”，它显示“ios”、“Android”和“Windows Phone”，如果我选择其中任何一个，它应该不会再添加 1 美元。 例如:“Mobile”将是 1 美元，如果我选择“ios”，它也会是 1 美元。但如果我选择“ios”和“Android”，那就是 2 美元。

我自己编写了代码，但它似乎没有按照我想要的方式工作，需要您的帮助。

这是我编写的部分工作代码:

HTML

<label class="checkbox inline">
    <input type="checkbox" class="device" value="0.01" id="checkbox_mobile" onclick='add(1, this);'/> Mobile
</label>
<label class="checkbox inline">
    <input type="checkbox" class="device" value="0.01" onclick='add(1, this);'/> PC
</label>
<br>
<label class="checkbox inline mobile">
    <input type="checkbox" class="os" id="mobile1" value="0.01" onclick='add2(1, this);'/> iOS
</label>
<label class="checkbox inline mobile">
    <input type="checkbox" class="os" id="mobile2" value="0.01" onclick='add2(1, this);'/> Android
</label>
<label class="checkbox inline mobile">
    <input type="checkbox" class="os" id="mobile3" value="0.01" onclick='add2(1, this);'/> Windows Phone
</label>
    <br></br>
<input style="display:none;" id="pool" name="pool" value="0">
<input style="display:none;" id="pool2" name="pool2" value="0">
USD<input id="total" name="total" value="0">

Jquery

 $('.mobile').hide();

$('#checkbox_mobile').change(function(){
    $('.mobile').toggle();
});

function add(value, this_chk_bx) {
    if (document.getElementById("checkbox_mobile").checked == false){
        document.getElementById("pool2").value = 0;
        $('#mobile1').attr('checked', false);
        $('#mobile2').attr('checked', false);
        $('#mobile3').attr('checked', false);
    }

    if ($('input[class="device"]:checked').length == 2) {
        value = document.getElementById("pool").value * 1 + value;
        document.getElementById("pool").value = value;
        document.getElementById("total").value = 0;
    } else {
        if (this_chk_bx.checked == true) {
            // Add if its checked
            value = document.getElementById("pool").value * 1 + value;
            document.getElementById("pool").value = value;
            document.getElementById("total").value = document.getElementById("pool").value*1+document.getElementById("pool2").value*1;
        } else {
            // Subtract if its unchecked
            value = document.getElementById("pool").value * 1 - value;
            document.getElementById("pool").value = value;
            document.getElementById("total").value = document.getElementById("pool").value*1+document.getElementById("pool2").value*1;
        }
    }
};

function add2(value, this_chk_bx) {
    if ($('input[class="os"]:checked').length == 3) {
        value = document.getElementById("pool2").value * 1 + value;
        document.getElementById("pool2").value = value;
    } else {
        if (this_chk_bx.checked == true) {
            // Add if its checked
            value = document.getElementById("pool2").value * 1 + value;
            document.getElementById("pool2").value = value;
            document.getElementById("total").value = document.getElementById("pool").value*1+document.getElementById("pool2").value*1;
        } else {
            // Subtract if its unchecked
            value = document.getElementById("pool2").value * 1 - value;
            document.getElementById("pool2").value = value;
            document.getElementById("total").value = document.getElementById("pool").value*1+document.getElementById("pool2").value*1;
        }
    }
};

https://jsfiddle.net/hh739j7t/1/

如果勾选所有选项，它不会将美元重置为 0。

Answer 1

将您的 onclick 函数替换为:

function computeTotal() {
    // get all mobile
    var mobileList = document.getElementsByName("mobile"),
        chkCount = 0,
        i = 0,
        len = mobileList.length,
        totalMobile = 0;
    for (; i < len; i ++) {
        if (mobileList[i].checked) {
            chkCount += 1;
        }
    }
    totalMobile = chkCount;

    // get all pc
    var pcList = document.getElementsByName("pc"),
        totalPC = 0;
    // reset value of these variables
    chkCount = 0;
    i = 0;
    len = pcList.length;
    for (; i < len; i ++) {
        if (pcList[i].checked) {
            chkCount += 1;
        }
    }
    totalPC = chkCount;


    // compute total
    var total = 0;
    if (totalMobile == mobileList.length && totalPC == pcList.length) {
        // total is zero since all device is selected
    } else if (totalMobile == mobileList.length && totalPC != pcList.length) {
        total = totalPC;
    } else {
        total = totalMobile + totalPC;
    }

    // display
    document.getElementById("total").value = total;
}

此外，将名称属性添加到您设备的复选框中。对于 PC 设备，name 值为 pc，对于移动设备，mobile 值为 mobile。