jquery checkbox中如何实现层层嵌套递增的关系

shape                            clarity
round[] pear[] square[]          SI2[] SI1[] VS2[] VS1[]
以上两个分别是name不同的checkbox，我希望点击shape类型后，出现一些数据，要是我再从clarity中点击其复选框时，相关的数据会在选中shape复选框的基础上，再去判断继而相应的变化。
例如：
SQ good G EX VS2 view
RD good G EX SI2 view
RD good D EX SI1 view
PR good G EX VS2 view当我点击round 和SI1 复选框后，就会显示
RD good D EX SI1 view现在问题是单独的复选框类实现了，就是两个合并取其交叉值时不知道如何用jquery函数去写，希望各位大侠帮帮忙，谢谢！急！！！
jquery， checkbox，

解决方案 »

  1.   

    补充：
    以下的数据都是通过div来表示的！
      

  2.   


    <script src="http://www.bestjewelryco.com/assets/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      <!-- shape -->
      $("#RD_icon1").click(function(){
       if($("#RD_icon1").is(":checked")){
    $(".RD_icons").css("display","block");
    }
    else{
    $(".RD_icons").css("display","none");
    }
      });
      $("#SQ_icon1").click(function(){
       if($("#SQ_icon1").is(":checked")){
    $(".SQ_icons").css("display","block");
    }
    else{
    $(".SQ_icons").css("display","none");
    }
      });
      $("#EC_icon1").click(function(){
       if($("#EC_icon1").is(":checked")){
    $(".EC_icons").css("display","block");
    }
    else{
    $(".EC_icons").css("display","none");
    }
      });
      $("#TR_icon1").click(function(){
       if($("#TR_icon1").is(":checked")){
    $(".TR_icons").css("display","block");
    }
    else{
    $(".TR_icons").css("display","none");
    }
      });
      $("#MQ_icon1").click(function(){
       if($("#MQ_icon1").is(":checked")){
    $(".MQ_icons").css("display","block");
    }
    else{
    $(".MQ_icons").css("display","none");
    }
      });
      $("#OV_icon1").click(function(){
       if($("#OV_icon1").is(":checked")){
    $(".OV_icons").css("display","block");
    }
    else{
    $(".OV_icons").css("display","none");
    }
      });
      $("#RA_icon1").click(function(){
       if($("#RA_icon1").is(":checked")){
    $(".RA_icons").css("display","block");
    }
    else{
    $(".RA_icons").css("display","none");
    }
      });
      $("#PS_icon1").click(function(){
       if($("#PS_icon1").is(":checked")){
    $(".PS_icons").css("display","block");
    }
    else{
    $(".PS_icons").css("display","none");
    }
      });
      $("#HS_icon1").click(function(){
       if($("#HS_icon1").is(":checked")){
    $(".HS_icons").css("display","block");
    }
    else{
    $(".HS_icons").css("display","none");
    }
      });
      $("#CU_icon1").click(function(){
       if($("#CU_icon1").is(":checked")){
    $(".CU_icons").css("display","block");
    }
    else{
    $(".CU_icons").css("display","none");
    }
      });
      <!-- shape -->
      
      
      <!-- clarity -->
      $("#SI2a").click(function(){
       if($("#SI2a").is(":checked")){
    $(".SI2").css("display","block");
    }
    else{
    $(".SI2").css("display","none");
    }
      });
      $("#SI1a").click(function(){
       if($("#SI1a").is(":checked")){
    $(".SI1").css("display","block");
    }
    else{
    $(".SI1").css("display","none");
    }
      });
      $("#VS2a").click(function(){
       if($("#VS2a").is(":checked")){
    $(".VS2").css("display","block");
    }
    else{
    $(".VS2").css("display","none");
    }
      });
      $("#VS1a").click(function(){
       if($("#VS1a").is(":checked")){
    $(".VS1").css("display","block");
    }
    else{
    $(".VS1").css("display","none");
    }
      });
      $("#VVS2a").click(function(){
       if($("#VVS2a").is(":checked")){
    $(".VVS2").css("display","block");
    }
    else{
    $(".VVS2").css("display","none");
    }
      });
      $("#VVS1a").click(function(){
       if($("#VVS1a").is(":checked")){
    $(".VVS1").css("display","block");
    }
    else{
    $(".VVS1").css("display","none");
    }
      });
      $("#IFa").click(function(){
       if($("#IFa").is(":checked")){
    $(".IF").css("display","block");
    }
    else{
    $(".IF").css("display","none");
    }
      });
      $("#FLa").click(function(){
       if($("#FLa").is(":checked")){
    $(".FL").css("display","block");
    }
    else{
    $(".FL").css("display","none");
    }
      });
      <!-- clarity -->});
      function Show_default(){
      $(".RD_icons").hide();
      $(".SQ_icons").show();
      $(".EC_icons").hide();
      $(".TR_icons").hide();
      $(".MQ_icons").hide();
      $(".OV_icons").hide();
      $(".RA_icons").hide();
      $(".PS_icons").hide();
      $(".HS_icons").hide();
      $(".CU_icons").hide();
      };
    </script>
    <body onLoad="Show_default()">
        <!-- Shape -->
    <div style=" background-color:#EEFFFE; width:520px; height:80px;">
         <h4>Shape</h4>
            <img border='0' src="round.png" alt="Round" />
    <input id="RD_icon1" name="checkboxN" value="RD" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_RD_OFF">
    <label for="shapeRD"></label>
            <img border="0" src="square.png" alt="Square" />
    <input id="SQ_icon1" name="checkboxN" value="SQ" type="checkbox" checked="checked" class="sprite_byo_shape_icon sprite-but_byo_shape_PR_OFF">
    <label for="shapeSQ"></label>
            <img border="0" src="ec.png" alt="Emerald" />
    <input id="EC_icon1" name="checkboxN" value="EC" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_EC_OFF">
    <label for="shapeEC"></label>
            <img border="0" src="as.png" alt="Triangle" />
    <input id="TR_icon1" name="checkboxN" value="TR" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_AS_OFF">
    <label for="shapeTR"></label>
            <img border="0" src="mq.png" alt="Marquise" />
    <input id="MQ_icon1" name="checkboxN" value="MQ" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_MQ_OFF">
    <label for="shapeMQ"></label>
            <img border="0" src="oval.png" alt="Oval" />
    <input id="OV_icon1" name="checkboxN" value="OV" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_OV_OFF">
    <label for="shapeOV"></label>
            <img border="0" src="radiant.png" alt="Radiant" />
    <input id="RA_icon1" name="checkboxN" value="RA" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_RA_OFF">
    <label for="shapeRA"></label>
            <img border="0" src="pear.png" alt="Pear" />
    <input id="PS_icon1" name="checkboxN" value="PS" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_PS_OFF">
    <label for="shapePS"></label>
            <img border="0" src="hs.png" alt="Heart" />
    <input id="HS_icon1" name="checkboxN" value="HS" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_HS_OFF">
    <label for="shapeHS"></label>
            <img border="0" src="cu.png" alt="Cushion" />
    <input id="CU_icon1" name="checkboxN" value="CU" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_CU_OFF">
    <label for="shapeCU"></label>       
    </div>
        <!-- Shape -->
        
        
        <!-- Clarity -->
        <div style=" background-color:#FBFFEE; width:520px; height:80px;">
         <h4>Clarity</h4>
         <input id="SI2a" name="clarity" value="SI2" type="checkbox">
         <label for="claritysi2">SI2</label>
         <input id="SI1a" name="clarity" value="SI1" type="checkbox">
         <label for="claritysi1">SI1</label> 
         <input id="VS2a" name="clarity" value="VS2" type="checkbox">
         <label for="clarityvs2">VS2</label> 
         <input id="VS1a" name="clarity" value="VS1" type="checkbox">
         <label for="claritysvs1">VS1</label> 
         <input id="VVS2a" name="clarity" value="VVS2" type="checkbox">
         <label for="clarityvvs2">VVS2</label> 
         <input id="VVS1a" name="clarity" value="VVS1" type="checkbox">
         <label for="clarityvvs1">VVS1</label> 
         <input id="IFa" name="clarity" value="IF" type="checkbox">
         <label for="clarityif">IF</label> 
         <input id="FLa" name="clarity" value="FL" type="checkbox">
         <label for="claritysfl">FL</label> 
        </div>
        <!-- Clarity -->
        
    <br /><div style="margin-bottom:5px; margin-top:5px; width:900px; height:1px;"></div>
         <div id="LD03163570_row" onmouseout="hideOverlay(this)" class="SQ_icons even SI1" data-sku="LD03163570" onmouseover="showOverlay(this)" style="clear:both">
           <div class="c1 ds_gc_center save" style="float:left;"> </div>
           <div class="c2 shape" style="float:left;">
             <div style="margin-top: 2px;" class="ds_grid_shape_icon sprite-icon_sm_shape_PR"></div>
             Princess
             SQ </div>
           <div class="c3 carat" style="float:left;">0.26</div>
           <div class="c4 cut" style="float:left; width:100;"> <span class="a">Very Good</span><span class="b">V Good</span><span class="c">VG</span> </div>
           <div class="c5 color" style="float:left;">E</div>
           <div class="c6 clarity" style="float:left;">SI1</div>
           <div class="c7 polish" style="float:left;">EX</div>
           <div class="c8 symmetry" style="float:left;">EX</div>
           <div class="c11 fluor" style="float:left;"> <span class="a">None</span> <span class="b">None</span> <span class="c">N</span> </div>
           <div class="c12 pricepercarat" style="float:left;">HK$ 9,519</div>
           <div class="c14 lnwdthratio" style="float:left;">1.01</div>
           <div class="c15 deliverydate" style="float:left;"> Aug&nbsp;21 </div>
           <div class="c16 ds_gc_center price" style="float:left;">HK$ 2,475</div>
           <div class="c17 ds_gc_center viewSelect" style="float:left;"> <a name="view_diamond_2" class="view_link ds_button_view ds_sprite_icons sprite-but_sm_ds_details" href="http://www.oraffi.com/-GIA-Certificate-Diamond--Princess-Shape-050ct--101ct_p_1474.html"><span>View</span></a>
             <div culet="None" nonmanufacturingdate="Aug 20" table="70.0" shape="PR" certlab="GIA" sku="LD03163570" lnwdthratio="1.01" depth="70.9" manufacturingdate="Aug 21" id="flyout-LD03163570" measurements="3.53x3.48x2.47mm" pricepercarat="HK$ 9,519" certpresent="true" style="display: none;" fluorescence="None" symmetry="Excellent" girdle="Thin to Slightly Thick" polish="Excellent"></div>
           </div>
         </div>
         <div class="cb"></div>
        
    ..............................
    然后现在希望写一个jquery函数：
    $("input:checkbox[name='clarity']").click(function(){
       $("input:checkbox[name='clarity']:checked").each(function(){
         .......
         .......
    });
        });
    就这一个函数不知道怎么写！求指教
      

  3.   

    贴上你的html 吧，<script src="http://www.bestjewelryco.com/assets/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      <!-- shape -->
      $("#RD_icon1").click(function(){
       if($("#RD_icon1").is(":checked")){
    $(".RD_icons").css("display","block");
    }
    else{
    $(".RD_icons").css("display","none");
    }
      });
      $("#SQ_icon1").click(function(){
       if($("#SQ_icon1").is(":checked")){
    $(".SQ_icons").css("display","block");
    }
    else{
    $(".SQ_icons").css("display","none");
    }
      });
      $("#EC_icon1").click(function(){
       if($("#EC_icon1").is(":checked")){
    $(".EC_icons").css("display","block");
    }
    else{
    $(".EC_icons").css("display","none");
    }
      });
      $("#TR_icon1").click(function(){
       if($("#TR_icon1").is(":checked")){
    $(".TR_icons").css("display","block");
    }
    else{
    $(".TR_icons").css("display","none");
    }
      });
      $("#MQ_icon1").click(function(){
       if($("#MQ_icon1").is(":checked")){
    $(".MQ_icons").css("display","block");
    }
    else{
    $(".MQ_icons").css("display","none");
    }
      });
      $("#OV_icon1").click(function(){
       if($("#OV_icon1").is(":checked")){
    $(".OV_icons").css("display","block");
    }
    else{
    $(".OV_icons").css("display","none");
    }
      });
      $("#RA_icon1").click(function(){
       if($("#RA_icon1").is(":checked")){
    $(".RA_icons").css("display","block");
    }
    else{
    $(".RA_icons").css("display","none");
    }
      });
      $("#PS_icon1").click(function(){
       if($("#PS_icon1").is(":checked")){
    $(".PS_icons").css("display","block");
    }
    else{
    $(".PS_icons").css("display","none");
    }
      });
      $("#HS_icon1").click(function(){
       if($("#HS_icon1").is(":checked")){
    $(".HS_icons").css("display","block");
    }
    else{
    $(".HS_icons").css("display","none");
    }
      });
      $("#CU_icon1").click(function(){
       if($("#CU_icon1").is(":checked")){
    $(".CU_icons").css("display","block");
    }
    else{
    $(".CU_icons").css("display","none");
    }
      });
      <!-- shape -->
      
      
      <!-- clarity -->
      $("#SI2a").click(function(){
       if($("#SI2a").is(":checked")){
    $(".SI2").css("display","block");
    }
    else{
    $(".SI2").css("display","none");
    }
      });
      $("#SI1a").click(function(){
       if($("#SI1a").is(":checked")){
    $(".SI1").css("display","block");
    }
    else{
    $(".SI1").css("display","none");
    }
      });
      $("#VS2a").click(function(){
       if($("#VS2a").is(":checked")){
    $(".VS2").css("display","block");
    }
    else{
    $(".VS2").css("display","none");
    }
      });
      $("#VS1a").click(function(){
       if($("#VS1a").is(":checked")){
    $(".VS1").css("display","block");
    }
    else{
    $(".VS1").css("display","none");
    }
      });
      $("#VVS2a").click(function(){
       if($("#VVS2a").is(":checked")){
    $(".VVS2").css("display","block");
    }
    else{
    $(".VVS2").css("display","none");
    }
      });
      $("#VVS1a").click(function(){
       if($("#VVS1a").is(":checked")){
    $(".VVS1").css("display","block");
    }
    else{
    $(".VVS1").css("display","none");
    }
      });
      $("#IFa").click(function(){
       if($("#IFa").is(":checked")){
    $(".IF").css("display","block");
    }
    else{
    $(".IF").css("display","none");
    }
      });
      $("#FLa").click(function(){
       if($("#FLa").is(":checked")){
    $(".FL").css("display","block");
    }
    else{
    $(".FL").css("display","none");
    }
      });
      <!-- clarity -->});
      function Show_default(){
      $(".RD_icons").hide();
      $(".SQ_icons").show();
      $(".EC_icons").hide();
      $(".TR_icons").hide();
      $(".MQ_icons").hide();
      $(".OV_icons").hide();
      $(".RA_icons").hide();
      $(".PS_icons").hide();
      $(".HS_icons").hide();
      $(".CU_icons").hide();
      };
    </script>
    <body onLoad="Show_default()">
        <!-- Shape -->
    <div style=" background-color:#EEFFFE; width:520px; height:80px;">
         <h4>Shape</h4>
            <img border='0' src="round.png" alt="Round" />
    <input id="RD_icon1" name="checkboxN" value="RD" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_RD_OFF">
    <label for="shapeRD"></label>
            <img border="0" src="square.png" alt="Square" />
    <input id="SQ_icon1" name="checkboxN" value="SQ" type="checkbox" checked="checked" class="sprite_byo_shape_icon sprite-but_byo_shape_PR_OFF">
    <label for="shapeSQ"></label>
            <img border="0" src="ec.png" alt="Emerald" />
    <input id="EC_icon1" name="checkboxN" value="EC" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_EC_OFF">
    <label for="shapeEC"></label>
            <img border="0" src="as.png" alt="Triangle" />
    <input id="TR_icon1" name="checkboxN" value="TR" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_AS_OFF">
    <label for="shapeTR"></label>
            <img border="0" src="mq.png" alt="Marquise" />
    <input id="MQ_icon1" name="checkboxN" value="MQ" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_MQ_OFF">
    <label for="shapeMQ"></label>
            <img border="0" src="oval.png" alt="Oval" />
    <input id="OV_icon1" name="checkboxN" value="OV" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_OV_OFF">
    <label for="shapeOV"></label>
            <img border="0" src="radiant.png" alt="Radiant" />
    <input id="RA_icon1" name="checkboxN" value="RA" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_RA_OFF">
    <label for="shapeRA"></label>
            <img border="0" src="pear.png" alt="Pear" />
    <input id="PS_icon1" name="checkboxN" value="PS" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_PS_OFF">
    <label for="shapePS"></label>
            <img border="0" src="hs.png" alt="Heart" />
    <input id="HS_icon1" name="checkboxN" value="HS" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_HS_OFF">
    <label for="shapeHS"></label>
            <img border="0" src="cu.png" alt="Cushion" />
    <input id="CU_icon1" name="checkboxN" value="CU" type="checkbox" class="sprite_byo_shape_icon sprite-but_byo_shape_CU_OFF">
    <label for="shapeCU"></label>       
    </div>
        <!-- Shape -->
        
        
        <!-- Clarity -->
        <div style=" background-color:#FBFFEE; width:520px; height:80px;">
         <h4>Clarity</h4>
         <input id="SI2a" name="clarity" value="SI2" type="checkbox">
         <label for="claritysi2">SI2</label>
         <input id="SI1a" name="clarity" value="SI1" type="checkbox">
         <label for="claritysi1">SI1</label> 
         <input id="VS2a" name="clarity" value="VS2" type="checkbox">
         <label for="clarityvs2">VS2</label> 
         <input id="VS1a" name="clarity" value="VS1" type="checkbox">
         <label for="claritysvs1">VS1</label> 
         <input id="VVS2a" name="clarity" value="VVS2" type="checkbox">
         <label for="clarityvvs2">VVS2</label> 
         <input id="VVS1a" name="clarity" value="VVS1" type="checkbox">
         <label for="clarityvvs1">VVS1</label> 
         <input id="IFa" name="clarity" value="IF" type="checkbox">
         <label for="clarityif">IF</label> 
         <input id="FLa" name="clarity" value="FL" type="checkbox">
         <label for="claritysfl">FL</label> 
        </div>
        <!-- Clarity -->
        
    <br /><div style="margin-bottom:5px; margin-top:5px; width:900px; height:1px;"></div>
         <div id="LD03163570_row" onmouseout="hideOverlay(this)" class="SQ_icons even SI1" data-sku="LD03163570" onmouseover="showOverlay(this)" style="clear:both">
           <div class="c1 ds_gc_center save" style="float:left;"> </div>
           <div class="c2 shape" style="float:left;">
             <div style="margin-top: 2px;" class="ds_grid_shape_icon sprite-icon_sm_shape_PR"></div>
             Princess
             SQ </div>
           <div class="c3 carat" style="float:left;">0.26</div>
           <div class="c4 cut" style="float:left; width:100;"> <span class="a">Very Good</span><span class="b">V Good</span><span class="c">VG</span> </div>
           <div class="c5 color" style="float:left;">E</div>
           <div class="c6 clarity" style="float:left;">SI1</div>
           <div class="c7 polish" style="float:left;">EX</div>
           <div class="c8 symmetry" style="float:left;">EX</div>
           <div class="c11 fluor" style="float:left;"> <span class="a">None</span> <span class="b">None</span> <span class="c">N</span> </div>
           <div class="c12 pricepercarat" style="float:left;">HK$ 9,519</div>
           <div class="c14 lnwdthratio" style="float:left;">1.01</div>
           <div class="c15 deliverydate" style="float:left;"> Aug&nbsp;21 </div>
           <div class="c16 ds_gc_center price" style="float:left;">HK$ 2,475</div>
           <div class="c17 ds_gc_center viewSelect" style="float:left;"> <a name="view_diamond_2" class="view_link ds_button_view ds_sprite_icons sprite-but_sm_ds_details" href="http://www.oraffi.com/-GIA-Certificate-Diamond--Princess-Shape-050ct--101ct_p_1474.html"><span>View</span></a>
             <div culet="None" nonmanufacturingdate="Aug 20" table="70.0" shape="PR" certlab="GIA" sku="LD03163570" lnwdthratio="1.01" depth="70.9" manufacturingdate="Aug 21" id="flyout-LD03163570" measurements="3.53x3.48x2.47mm" pricepercarat="HK$ 9,519" certpresent="true" style="display: none;" fluorescence="None" symmetry="Excellent" girdle="Thin to Slightly Thick" polish="Excellent"></div>
           </div>
         </div>
         <div class="cb"></div>
        
    ..............................
    然后现在希望写一个jquery函数：
    $("input:checkbox[name='clarity']").click(function(){
       $("input:checkbox[name='clarity']:checked").each(function(){
         .......
         .......
    });
        });
    就这一个函数不知道怎么写！求指教 
      

  4.   

    SQ good G EX VS2 view
    这种不太明白是什么？你有两个div(shape,clarity),在两个div中有些checkbox,选中部分checkbox后，出现“SQ good G EX VS2 view”SQ,VS2是两个checkbox的值，good G EX view是些什么
      

  5.   


    是这样的：现有两类的checkbox，一个是shape，另一个是clarity。
    当我点击shape类的RD时（也就是round），在下面就会显示一系列含有round的数据，而在点击了RD的情况下，再点击VS2，就会在原有的基础上，显示即是RD的又是VS2的数据。至于good G EX view是这些数据里面的其它值，暂时可以忽略！