如何計算jquery中的單選按鈕和複選框的值

我有一個已經工作的代碼來計算單選按鈕的總和。我在其中一個單選按鈕組中改變了主意，並決定將其設置爲複選框。當我勾選複選框上的項目時，總和將返回NaN。我會在jquery中添加/更改哪些內容以便識別複選框值？如何計算jquery中的單選按鈕和複選框的值

這裏是我的代碼：

JQuery的

< script type = "text/javascript" > 
 
    function calcscore() { 
 
    $(".calc:checked").each(function() { 
 
     score += parseInt($(this).val(), 10); 
 
    }); 
 
    $('#price').text(score.toFixed(2)); 
 
    $("input[name=sum]").val(score) 
 
    } 
 
$().ready(function() { 
 
    $(".calc").change(function() { 
 
    calcscore() 
 
    }); 
 
}); 
 
< /script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<li> 
 
    <label> 
 
    <input class="calc" type="radio" name="rad1" id="rad1" /> 
 
    
 
    </label> 
 
    <input type="hidden" name="rad1" value="100"> 
 
</li> 
 

 

 
<li> 
 
    <label> 
 
    <input class="calc" type="checkbox" name="check1" id="check1" value="200" /> 
 
    
 
    </label> 
 
    <input type="hidden" name="check1" value="200"> 
 
</li> 
 

 
<p>Total: PHP <span id="price">0</span> 
 
</p>

感謝所有幫助。

來源

2016-03-03 KevinG

我不是PHP的專家，但你有什麼在你的單選按鈕值的財產？整型？ –

您的問題中的代碼不起作用，因爲它包含PHP腳本。你能否將其剝離到最低工作示例？ – martin

是的。它是用戶在前端輸入的文本。它作爲項目的價格 – KevinG

此代碼代碼應該回答你的問題：

function calcscore() { 
 
\t score = 0; 
 
\t $(".calc:checked").each(function() { 
 
\t \t score += Number($(this).val()); 
 
\t }); 
 
\t $("#price").text(score.toFixed(2)); 
 
\t $("#sum").val(score) 
 
} 
 
$().ready(function() { 
 
\t $(".calc").change(function() { 
 
\t \t calcscore() 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<li> 
 
    <label> 
 
    <input class="calc" type="radio" name="rad1" id="rad1" value="100" /> 
 
    </label> 
 
</li> 
 
<li> 
 
    <label> 
 
    <input class="calc" type="checkbox" name="check1" id="check1" value="200" /> 
 
    </label> 
 
</li> 
 
<input type="hidden" name="sum" id="sum" value="0"> 
 
<p>Total: PHP <span id="price">0</span> 
 
</p>

來源

2016-03-03 13:44:52

謝謝你們的回覆！已經準備好了代碼並準備好了！ – KevinG

爲您的標記，用例，因爲它在這個question.try

$('.calc').on('click', function() { 
 

 
    var sum = 0; 
 

 
    $('.calc:checked').each(function() { 
 
    sum += Number($(this).parent().next().val()) 
 

 
    }) 
 

 
    $('#price').text(sum) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<li> 
 
    <label> 
 
    <input class="calc" type="radio" name="rad1" id="rad1" /> 
 

 
    </label> 
 
    <input type="hidden" name="rad1" value="100"> 
 
</li> 
 

 

 
<li> 
 
    <label> 
 
    <input class="calc" type="checkbox" name="check1" id="check1" value="200" /> 
 

 
    </label> 
 
    <input type="hidden" name="check1" value="200"> 
 
</li> 
 

 
<p>Total: PHP <span id="price">0</span> 
 
</p>

現在站立

試試這個，你不需要爲values.i隱藏的字段刪除它們，並使用複選框的值屬性。

$('.calc').on('click', function() { 
 

 
    var sum = 0; 
 

 
    $('.calc:checked').each(function() { 
 
    sum += Number($(this).val()) 
 

 
    }) 
 

 
    $('#price').text(sum) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<li> 
 
    <label> 
 
    <input class="calc" type="checkbox" name="check1" value="100" id="rad1" /> 
 

 
    </label> 
 

 
</li> 
 

 

 
<li> 
 
    <label> 
 
    <input class="calc" type="checkbox" name="check1" value="200" id="check1" value="200" /> 
 

 
    </label> 
 

 
</li> 
 

 
<p>Total: PHP <span id="price">0</span> 
 
</p>

來源

2016-03-03 13:45:50

如何計算jquery中的單選按鈕和複選框的值

回答

相關問題