复选框和选择选项更新总值答案

【问题标题】：Checkbox and Select Options update a Total Value复选框和选择选项更新总值
【发布时间】：2014-11-24 02:13:51
【问题描述】：

我必须使用复选框和选择字段创建一个小型计算器表单。

如果用户点击两个复选框，则选择字段将更新为选项 2，并且总数将更新为总数 456

这是我的 HTML

<div>
<label for="one">1</label>
<input type="checkbox" name="1" id="1" value="228" />
</div>
<div>
<label for="two">2</label>
<input type="checkbox" name="2" id="2" value="228" />
</div>
<div>
<label for="three">3</label>
<input type="checkbox" name="3" id="3" value="228" />
</div>
<div>
<label for="four">4</label>
<input type="checkbox" name="4" id="4" value="228" />
</div>
<div>
<label for="five">5</label>
<input type="checkbox" name="5" id="5" value="228" />
</div>

<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<input type="text" name="Total" value="Total">

这是一个小提琴 - http://jsfiddle.net/barrycorrigan/se21b1p6/1/

我只是不确定如何在 jquery 中创建它。任何帮助将不胜感激。

谢谢

【问题讨论】：

查看.change 事件以开始。

标签： javascript jquery select checkbox

【解决方案1】：

这行得通：

$(function() {
    var total = $("input[name='Total']");
    var checkBox = $("input[type='checkbox']");
    var _select = $("select");
    checkBox.click(function(){
        checkBox.prop("checked", false);
        var _index = $(this).attr("id")
        total.val(_index * 228);
        _select.val(_index);
        checkBox.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
    });
    _select.change(function() {
        checkBox.prop("checked", false);
        var _val = $(this).val();
        total.val(_val * 228);
        checkBox.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });       
    });  
});

你可以在fiddle看到它：http://jsfiddle.net/yuanzm/se21b1p6/6/

【讨论】：

这太棒了，谢谢。如何使用选择字段。如果您从选择列表中选择 5，则将选中 5 个复选框并显示总数。这太棒了，非常感谢您的帮助
不客气~我更新了答案，你可以看到变化。希望能帮到你~
很高兴~如果你还有关于jQuery的问题也可以问我
还有一个问题，如果您查看示例http://www.intrawestpassport.com/#purchase，如果客户选择了第 5 个图标（复选框），他们都会被选中。如果您选择 2 前两个获得选择，则相同。无论如何，我们可以将其添加到您的示例中。非常感谢。
是的，选择字段也一样。查看最新答案~

【解决方案2】：

你也可以试试这个

     var countChecked = function() {
     var n = $( "input:checked" ).length; 

  $('select >option:eq('+ n +')').prop('selected', true);
      sum();

 };
countChecked();
function sum() {
var inputs = $('input[type=checkbox]:checked'),
    result = $('#total'),
    sum = 0;            

for(var i=0; i< $('input[type=checkbox]:checked').length; i++) {
    var ip = inputs[i];

    if (ip.name && ip.name.indexOf("total") < 0) {
        sum += parseInt(ip.value) || 0;
    }

}

$(result).val(sum);
  } 
 $( "input[type=checkbox]" ).on( "click", countChecked );

http://jsfiddle.net/amolks/yfat78rL/

【讨论】：