當選中複選框時隱藏表格行

我正在測試這個table，我試圖在選中checkbox時隱藏一些行。當選中複選框時隱藏表格行

例如在我的情況：當該複選框3.5 cheked表行包含齊默2.5和4.5被隱藏。或者，例如，如果複選框2.5被激活，那麼Zimmer 3.5或4.5的表格行將不可見。

我試着給一個複選框的數據數量，但沒有...

我試圖<input type="checkbox" data-number="3.5" />

任何想法？

編輯：

我想是這樣的JS：

jQuery(document.body).on('change', "#row2", function() { 
jQuery("#tablepress-id-5 tr.row2").toggle(!this.checked); 
});

來源

2016-07-21 A.Casa

我相信當你點擊複選框，使預期的行消失一些JavaScript應該解僱。你有相關的JavaScript嗎？

來源

2016-07-21 06:09:17

對不起不知道JQuery的。只是一個想法，而不是document.body它可能是真正的複選框。 –

你應該反過來 - 複選框應該有一個基於它所表示的數值的值，並且表格行可以有一個數據屬性來指示房間的數量。

<input type="checkbox" name="rooms_check" value="2"> 
<input type="checkbox" name="rooms_check" value="3"> 
<input type="checkbox" name="rooms_check" value="4"> 
<table> 
    <tr data-number="2"> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
    </tr> 
    <tr data-number="3"> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
    </tr> 
</table>

與JS

然後：

$('input[name="rooms_check"]').change(function(){ 
    $('input[name="rooms_check"]').each(function(){ 
     if(!$(this).prop('checked')) { 
      $('tr[data="'+$(this).val()+'"]').hide(); 
     } else { 
      $('tr[data="'+$(this).val()+'"]').show(); 
     } 
    }); 
});

UPDATE：

這裏是你如何能做到這一點不改變表的HTML。

$('input[name="rooms_check"]').change(function(){ 
    $('input[name="rooms_check"]').each(function(){ 
     if(!$(this).prop('checked')) { 
      $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').hide(); 
     } else { 
      $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').show(); 
     } 
    }); 
});

來源

2016-07-21 06:21:34 trajchevska

感謝您的提示，但不幸的是我不能編輯HTML文件，我不能給'數據編號'值的行。在JS中是否有方法只讀取並顯示包含像3.5這樣的期望值的行？ –

你可以，但是很不方便。讓我更新答案。 – trajchevska

感謝您的編輯。而在這種情況下，我必須像這樣'.val（2.5）'添加我的值？ –

喜卡薩試試這個代碼

$('input[type=checkbox]').on('change',function(e){ 
v=$(this).val(); 
$('td:contains("+v+")').parent('tr').toggle() 
})

來源

2016-07-21 09:00:45

當選中複選框時隱藏表格行

回答

相關問題