侦听jQueryUI按钮的更改，然后更新一个div_Jquery_Jquery Ui

侦听jQueryUI按钮的更改，然后更新一个div

jquery jquery-ui

侦听jQueryUI按钮的更改，然后更新一个div,jquery,jquery-ui,Jquery,Jquery Ui,我相信这是一个简单的情况，可能有点普遍，但我被卡住了，似乎不能完全理解它我使用jQueryUI按钮作为复选框。我希望这样，如果用户单击一个，jquery将对页面底部的相应div进行更改。最终，我计划让它使用.load来填充另一个页面的内容，但是现在，我发现我只是改变了背景颜色下面是我正在尝试使用的代码。我不太擅长jQuery，可能会犯一些简单的错误谢谢你能提供的任何帮助 <!doctype html> <html lang="en"> <head>

我相信这是一个简单的情况，可能有点普遍，但我被卡住了，似乎不能完全理解它

我使用jQueryUI按钮作为复选框。我希望这样，如果用户单击一个，jquery将对页面底部的相应div进行更改。最终，我计划让它使用.load来填充另一个页面的内容，但是现在，我发现我只是改变了背景颜色

下面是我正在尝试使用的代码。我不太擅长jQuery，可能会犯一些简单的错误

谢谢你能提供的任何帮助

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Button - Checkboxes</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(document).ready(function() {
        $(function() {
            $( "#check" ).button();
            $( "#format" ).buttonset();
        });
    });
    $('input:checkbox').change(function(){
        if($(this).is(':checked')){
            alert('checked');
            $("#first").css("background-color","yellow");
        } else {
            alert('un-checked');
            $("#first").css("background-color","red");
        }
    });
</script>
<style>
#format { margin-top: 2em; }
</style>


jQuery UI按钮-复选框
$（文档）.ready（函数（）{
$（函数（）{
$（“#检查”）.button（）；
$（“#格式”）.buttonset（）；
});
});
$（'input:checkbox'）.change（function（）{
如果（$（this）.is（':checked'））{
警报（“已检查”）；
$（“#first”）.css（“背景色”、“黄色”）；
}否则{
警报（“未检查”）；
$（“#first”）.css（“背景色”、“红色”）；
}
});
#格式{页边距顶端：2em；}


1.
2.
3.

更改JS，使.Change（）函数位于文档就绪部分内。否则，它将不处于活动状态

<div id="format">
    <input type="checkbox" id="check1" /><label for="check1">1</label>
    <input type="checkbox" id="check2" /><label for="check2">2</label>
    <input type="checkbox" id="check3" /><label for="check3">3</label>
</div>
<!-- The following divs will end up being populated via an ajax call based on checkbox selections -->
<!-- Ultimately, checking a given checkbox should toggle the corresponding div -->
<div id="first">
    &nbsp;
</div>
<div id="second">
    &nbsp;
</div>
<div id="third">
    &nbsp;
</div>

 $(document).ready(function() {
        $(function() {
            $( "#check" ).button();
            $( "#format" ).buttonset();
        });

    $('input:checkbox').change(function(){
        if($(this).is(':checked')){
            alert('checked');
            $("#first").css("background-color","yellow");
        } else {
            alert('un-checked');
            $("#first").css("background-color","red");
        }
    });
});