-1

私は基本的なhtml構造を持っています：

<table>

  <tbody>
    <tr class="1">
      <td>
        <p style="font-size:large"> 
            <span class="muted"> This is the first object </span> 
        </p>
      </td>
    </tr>

    <tr class="2">
      <td>
        <p style="font-size:large"> 
            <span class="muted"> This is second object </span> 
        </p>
      </td>
    </tr>

    <tr class="3">
        <p style="font-size:large"> 
            <span class="muted"> this is the third object </span> 
        </p>
      </td>
    </tr>

</tbody>
</table>

次に、チェックボックスがあります。必要な機能は、チェックボックス1がオンになっている場合、クラス1のtrのみが表示されることです。

チェックボックス2と3をクリックすると、クラス1のtrが非表示になり、2、3がdomに表示されます。

チェックボックス2、* 3 *がオフになっていて、1がクラス2でチェックされている場合、3は表示されず、1が表示されます。

これはjQueryでどのように行うことができますか？

4

1 に答える 1

2

説明は、 2と3または1のいずれかを表示することを示しているように思われるため、ラジオを使用した解決策を次に示します。ラジオは互いにキャンセルしますが、チェックボックスはキャンセルしません。

これが望まれる行動ではない場合は、説明を明確にする必要があります

HTML：

<label>Show All<input type="radio" value="0" name="radio"></label>
<label>1<input type="radio" value="1" name="radio"></label>
 <label>2 &amp; 3<input type="radio" value="23" name="radio"></label>

JS

var rows = $('tr');

$(':radio').change(function() {
    var classNum = $(this).val();
    rows.hide();
    var toShow;
    if( classNum=='0'){
       toShow=rows;        
    }else{
        toShow = classNum=='1' ? rows.filter('.1') :  rows.not('.1');
    }
    toShow.show();
});

デモ：http：//jsfiddle.net/wGLfX/

于 2012-11-24T22:46:28.213 に答える