使用jquery / javascript充电选项。 ＆＃39;数学＆＃39;逻辑

Question

我试图实施一个广告系统，根据用户的偏好向用户收费。默认情况下，如果用户未选择任何选项，则其广告将显示在所有设备上。如果选择特定设备，我只会向他们收费。

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

此外，最后一个条件是：如果我点击了＆＃39;移动＆＃39;它显示了＆＃39; ios＆＃39; Android＆＃39;和Windows Phone＆＃39;如果我选择其中任何一个，它假设不添加另一个USD1。 例如：＆＃39;移动＆＃39;将是USD1，如果我选择＆＃39; ios＆＃39;，它也将是USD1。但如果我选择＆＃39; ios＆＃39;和＆＃39; Android＆＃39;，它将是USD2。

我自己编写代码，它似乎不像我想要的那样工作，需要你的帮助。

这是我制作的部分工作代码：

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/

如果勾选了所有选项，则不会将USD重置为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设备，移动设备的名称值为 pc ，移动。