j查询进度条不起作用

尝试将进度条的值存储在变量上，这样您就可以增加或减少其值以进行正确的计算。

它将是这样的：

previousValue = 0;
$("#budgetbar").progressbar({ 
    value: 10+previousValue
});

此外，您需要检查复选框是否已选中，而不是使用"单击"事件。尝试这样的事情

if($('#checkboxId').is(':checked'))

或者，当然，您需要在复选框中添加一个 ID。

希望对您有所帮助！

来吧，希望对您有所帮助。

干杯。

<script type="text/javascript">
    $( document ).ready( function()
    {
        $( "#budgetbar" ).progressbar();
    });
    var currentProgress = 0;
    function adjustProgress( checkbox )
    {
        if ( $( checkbox ).is( ":checked" ) )
        {
            currentProgress += parseInt( $( checkbox ).val() );
        }
        else
        {
            currentProgress -= parseInt( $( checkbox ).val() );
        }
        $( "#budgetbar" ).progressbar( "option" , "value" , currentProgress )
        if ( currentProgress > 100 )
        {
            alert( "You have exceeded the maximum value of 100" );
        }
    }
</script>
<div id="budgetbar"/>
<div>
    <input type="checkbox" class="option1" value="10" onclick="adjustProgress( this )"/>Expense 1 - $100,000<br/>
    <input type="checkbox" class="option2" value="50" onclick="adjustProgress( this )"/>Expense 2 - $500,000<br/>
    <input type="checkbox" class="option3" value="20" onclick="adjustProgress( this )"/>Expense 3 - $200,000<br/>
    <input type="checkbox" class="option4" value="50" onclick="adjustProgress( this )"/>Expense 4 - $500,000<br/>
    * Max Expenses - $1,000,000 
</div>

如果将值分配给input复选框，则可以大大简化代码：

<input type="checkbox" class="option" value="10"/> Expense 1 - $100,000<br />
<input type="checkbox" class="option" value="50"/> Expense 2 - $500,000<br />
<input type="checkbox" class="option" value="20"/> Expense 3 - $200,000<br />
<input type="checkbox" class="option" value="50"/> Expense 4 - $500,000<br />

这样，您就不必以不同的方式处理每个复选框。 相反，您可以对所有选项使用单个处理程序。 这使得调试和代码维护变得更加简单。

其次，当每个选项更改时，您希望将总值分配给progressbar，而不仅仅是单击的选项的值。 使用 change 而不是 click ，因为这只会在复选框更改其状态时触发。 （我知道，差别很小）。

// The only handler you need:
$('.option').on('change', function() {
    // The total
    var total = 0;
    // Sum the value of all checked checkboxes
    $('.option:checked').each(function() {
        total += parseInt($(this).val());
    });
    // Assign the value using the correct method:
    $("#budgetbar").progressbar("value", total );
});

此外，您在调用中使用progressBar来设置参数（请注意大写字母 B）。 正确的名称是 progressbar 。

示例：http://jsfiddle.net/DjWCz/2/

HTML：（注意类名更改和值添加）

<input type="checkbox" class="option" value="10"/> Expense 1 - $100,000<br />
<input type="checkbox" class="option" value="50"/> Expense 2 - $500,000<br />
<input type="checkbox" class="option" value="20"/> Expense 3 - $200,000<br />
<input type="checkbox" class="option" value="50"/> Expense 4 - $500,000<br />

脚本：

<script type="text/javascript">
    $("#budgetbar").progressbar({
        value: 0,
        max: 100,
        textFormat: 'fraction',
        complete: function(event, ui) {
            alert("Budget limit reached!");
        }
    });
    $('.option').on('change', function() {
        var total = 0;
        $('.option:checked').each(function() {
            total += parseInt($(this).val());
        });
        $("#budgetbar").progressbar("value", total );
    });
</script>

您可以使用 jQuery UI 进度条更改 jQuery UI 进度条的值

$("#budgetbar").progressbar("option", "value", 25);

这仅将值设置为 25（不增加 25）。获取可以使用的值

$("#budgetbar").progressbar("option", "value");

而且您可能需要检查复选框是否已选中：-）

我会这样做（未经测试）

var $budgetbar = $("#budgetbar"); // It's no good to repeat selections
$(".option1").click(function () {
    var thisValue = 25, // This checkbox' value
        currentValue = $budgetbar.progressbar("option", "value"),
        newValue;
    if($(this).is(':checked')) {
        newValue = currentValue + thisValue; // add
    } else {
        newValue = currentValue - thisValue; // subtract
    }
    $budgetbar.progressbar("option", "value", newValue)
});

编辑，警报（可能有更好的方法）：

$budgetbar.bind("progressbarchange", function(event, ui) {
    var value = $budgetbar.progressbar("option", "value");
    if (value > 100) {
        alert("You're over 100");
    }
});