Javascript 更改div的可见性

我有一个div部分，它有特定的attributemdxquery，这个属性将被发送到一个js文件，结果将以html显示，但是，我需要更改这个查询，为此，我设计了不同的div部分，每个部分都有不同的查询。我知道我想通过单击我的复选框来更改此部分的可见性，对于每个复选框，我必须有特定的div和特定的查询，这是我的一段代码，似乎是正确的，但不起作用，有什么问题吗

   <div class='first query' style="width:80%;" id="mdxQueryEditor"
            dojoType="GeoSOA.Spatialytics.widgets.MdxQueryEditor" title="MDX query editor"
            submitButtonLabel="Submit"
            mdxQuery="SELECT {[Measures].[report]} ON COLUMNS,&#x000A;{[State].[City].members} ON ROWS&#x000A;FROM [ppgis]">
        </div>

<div class='second query' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor' style='width:80%;' mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,&#x000A;{[Boston].[City].members} ON ROWS&#x000A;FROM [ppgis]' submitButtonLabel='Submit'></div>
<div  class='third query' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor' style='width:80%;' mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,&#x000A;{[Allston].[City].members} ON ROWS&#x000A;FROM [ppgis]' submitButtonLabel='Submit'></div>
<div   id="debug" ></div>

---

你的选择器错了，试试这个

 $("#State").click( function() {
     if($("#State").is(":checked")) {
          $('.first,.second').hide();
          $('.third').show();
         }
   });

请阅读以下内容：

尝试：

$("#State").click( function() {
    if($("#State").is(":checked")) {
        /*When the checkbox is checked*/
        $('first.query').css('display','none');
        $('second.query').css('display','none');
        $('third.query').css('display','block') ;
    }
}); 

或

$("#State").click( function() {
    if($("#State").is(":checked")) {
        /*When the checkbox is checked*/
        $('first.query').css('display','none');
        $('second.query').css('display','none');
        $('third.query').css('display','block') ;
    }
}); 

$("#State").click( function() {
    if($("#State").is(":checked")) {
        /*When the checkbox is checked*/
        $('.query').not('third').css('display','none');
        $('third.query').css('display','block') ;
    }
});