jQueryの名前/ idsに依存してチェック項目をインデントする方法は？

Question

チェックボックスの名前がカテゴリの場合、チェックボックスの名前がの商品でインデントされた場合に改行が出力されることを確認します。親製品またはカテゴリがチェックされていない場合は、詳細を削除します。

$(document).ready(function() { 
 
\t var elems = $('input:checkbox'); 
 
\t elems.on('change', function() { 
 
\t \t $('#list').val(
 
\t \t \t elems.filter(':checked').map(function() { 
 
\t \t \t \t return this.value; 
 
\t \t \t }).get().join("\n\t") 
 
\t \t); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<table border="1"> 
 
\t <tr><td>Category</td> 
 
\t \t <td>Name</td> 
 
\t \t <td>Details</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="3"><label><input type="checkbox" value="Category 1" name="category" /> Category 1</label></td> 
 
\t \t <td><label><input type="checkbox" value="ProductName A" name="product" /> ProductName A</label></td> 
 
\t \t <td><label><input type="checkbox" value="ProductDetail A-1" name="detail" /> ProductDetail A-1</label></td> 
 
\t </tr> 
 
\t <tr><td rowspan="2"><label><input type="checkbox" value="ProductName B" name="product" /> ProductName B</label></td> 
 
\t \t <td><label><input type="checkbox" value="ProductDetail B-1" name="detail" /> ProductDetail B-1</label></td> 
 
\t </tr> 
 
\t <tr><td><label><input type="checkbox" value="ProductDetail B-2" name="detail" /> ProductDetail B-2</label></td></tr> 
 
\t 
 
\t <tr> 
 
\t \t <td rowspan="3"><label><input type="checkbox" value="Category 2" name="category" /> Category 2</label></td> 
 
\t \t <td><label><input type="checkbox" value="ProductName A" name="product" /> ProductName A</label></td> 
 
\t \t <td><label><input type="checkbox" value="ProductDetail A-1" name="detail" /> ProductDetail A-1</label></td> 
 
\t </tr> 
 
\t <tr><td rowspan="2"><label><input type="checkbox" value="ProductName B" name="product" /> ProductName B</label></td> 
 
\t \t <td><label><input type="checkbox" value="ProductDetail B-1" name="detail" /> ProductDetail B-1</label></td> 
 
\t </tr> 
 
\t <tr><td><label><input type="checkbox" value="ProductDetail B-2" name="detail" /> ProductDetail B-2</label></td></tr> 
 
</table> 
 

 
<textarea id="list" rows="10" cols="45" ></textarea> 
 
</form>

私の現在のスクリプトが改行アイテムのセットを返す：

Category 1 
    ProductName A 
    ProductDetail A-1 
    ProductName B 
    ProductDetail B-1 
    ProductDetail B-2 
    Category 2 
    ProductName A 
    ProductDetail A-1 
    ProductName B 
    ProductDetail B-1 
    ProductDetail B-2 

は予想通り、このように表示することが可能でしょうか？またはこの成果を達成するための考えがありますか？

Category 1 
    ProductName A 
     ProductDetail A-1 
    ProductName B 
     ProductDetail B-1 
     ProductDetail B-2 
Category 2 
    ProductName A 
     ProductDetail A-1 
    ProductName B 
     ProductDetail B-1 
     ProductDetail B-2 

Answer 1

これを試してみてください：

$(document).ready(function() { 
    var elem = $('input:checkbox'); 

    elem.on('change', function() { 
     $('#list').val(
      elem.filter(':checked').map(function() { 
       if(this.name == 'product') { 
        return "\t" + this.value 
       } 
       if(this.name == 'detail') { 
        return "\t\t" + this.value 
       } 
       return this.value; 
      }).get().join("\n") 
     ); 
    }); 
}); 

私はそれをテストし、それが働いているようだ;）

を親要素がチェックされているかどうかを確認することができるようにするには、あなたの情報を持っている必要がありますたとえば、data-parent属性を使用すると、次のようになります。 html

<tr> 
     <td rowspan="3"> 
      <label><input type="checkbox" value="Category 1" name="category" /> Category 1</label> 
     </td> 
     <td> 
      <label><input type="checkbox" value="ProductName A" name="product" data-parent="Category 1"/> ProductName A</label> 
     </td> 
     <td> 
      <label><input type="checkbox" value="ProductDetail A-1" name="detail" data-parent="ProductName A" /> ProductDetail A-1</label> 
     </td> 
    </tr> 
    <tr> 
     <td rowspan="2"> 
      <label><input type="checkbox" value="ProductName B" name="product" data-parent="Category 1"/> ProductName B</label> 
     </td> 
     <td> 
      <label><input type="checkbox" value="ProductDetail B-1" name="detail" data-parent="ProductName B"/> ProductDetail B-1</label> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label><input type="checkbox" value="ProductDetail B-2" name="detail" data-parent="ProductName B"/> ProductDetail B-2</label> 
     </td> 
    </tr> 

の

JS

function checkParent(type, value) { 
     return $('input:checkbox[name="' + type + '"][value="' + value + '"]:checked').length; 
    } 

    $(document).ready(function() { 
     var elem = $('input:checkbox'); 
     var parent; 

     elem.on('change', function() { 
      $('#list').val(
       elem.filter(':checked').map(function() { 
        if(this.name == 'product') { 
         // check for parent category 
         parent = $(this).data('parent'); 
         if(checkParent("category", parent)) { 
          return "\t" + this.value; 
         } else { 
          return ''; 
         } 
        } 
        if(this.name == 'detail') { 
         parent = $(this).data('parent'); 
         category = $('input:checkbox[name="product"][value="' + parent + '"]').data('parent'); 
         if(checkParent("product", parent) && checkParent("category", category)) { 
          return "\t\t" + this.value; 
         } else { 
          return ''; 
         } 
        } 
        return this.value; 
       }).get().join("\n").replace("\n\n", "\n") 
      ); 
     }); 
    }); 

それは製品私たちは、親カテゴリをチェックし、それが詳細あるとき、我々はまた、製品やカテゴリをチェックしている

。

最後置き換える

は空行を持つ防止するために必要とされます。あなたのHTML内