2015-08-25 2 views
2

Я сделал таблицу с флажками, которые показывают и скрывают строки, чтобы упростить сравнение определенных строк. Я хотел добавить неопределенные флажки, чтобы одновременно выбирать или не выбирать несколько строк. Это похоже на то, что он проверяет под ним поля, но не запускает функцию, чтобы скрыть или показать строку, даже если ее проверили. Однако отдельные флажки все еще срабатывают.Как установить неопределенный флажок для запуска функции других флажков?

jsfiddle

Показать/скрыть строки с флажком

$('input[type = checkbox]').change(function() { 
var valu = $(this).val(); 
var ischecked = $(this).is(":checked"); 

if(ischecked){ 
    $('.' + valu).show(); 
}else{ 
    $('.' + valu).hide(); 
} 
}); 

неопределимых CheckBox для деления 1

$(document).ready(function() { 
var checkboxes = document.querySelectorAll('input.div1'), 
checkdiv1 = document.getElementById('checkdiv1'); 

for(var i=0; i<checkboxes.length; i++) { 
checkboxes[i].onclick = function() { 
    var checkedCount = document.querySelectorAll('input.div1:checked').length; 

    checkdiv1.checked = checkedCount > 0; 
    checkdiv1.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
} 
} 

checkdiv1.onclick = function() { 
for(var i=0; i<checkboxes.length; i++) { 
    checkboxes[i].checked = this.checked; 
} 
} 
}); 

Неопределенный Checkbox для разделения 2

$(document).ready(function() { 
var checkboxes = document.querySelectorAll('input.div2'), 
checkdiv2 = document.getElementById('checkdiv2'); 

for(var i=0; i<checkboxes.length; i++) { 
checkboxes[i].onclick = function() { 
    var checkedCount = document.querySelectorAll('input.div2:checked').length; 

    checkdiv2.checked = checkedCount > 0; 
    checkdiv2.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
} 
} 

checkdiv2.onclick = function() { 
for(var i=0; i<checkboxes.length; i++) { 
    checkboxes[i].checked = this.checked; 
} 
} 
}); 
+0

Если один из наших ответов помог вам, пожалуйста, выберите один из них в качестве ответа. – Stef

ответ

0

1) Вам нужно добавить строки hide/show на основе внутренних флажков, чтобы вы могли привязать обработчик событий «change» к флажкам с классом «show». Таким образом, вы код будет

$('input[type = checkbox].show').change(function() { 

вместо

$('input[type = checkbox]').change(function() { 

2) Вы можете удалить функцию второго $ (документ) .ready() и объединить свой код в один.

$(document).ready(function(){ fun1() }); 
$(document).ready(function(){ fun2() }); 

эквивалентно

$(document).ready(function(){ fun1(); fun2(); }); 

3) Вы можете вызвать 'изменить' событие внутренних флажков, когда внешняя кнопка нажата:

$(checkboxes[i]).trigger('change'); 

$('input[type = checkbox].show').change(function() { 
 
    
 
    var valu = $(this).val(); 
 
    var ischecked = $(this).is(":checked"); 
 
    
 
    if(ischecked){ 
 
     $('.' + valu).show(); 
 
    }else{ 
 
     $('.' + valu).hide(); 
 
    } 
 
}); 
 

 
$(document).ready(function() { 
 
    \t var checkboxes = document.querySelectorAll('input.div1'); 
 
    var checkdiv1 = document.getElementById('checkdiv1'); 
 

 
    for(var i=0; i<checkboxes.length; i++) { 
 
     checkboxes[i].onclick = function() { 
 
      var checkedCount = document.querySelectorAll('input.div1:checked').length; 
 

 
      checkdiv1.checked = checkedCount > 0; 
 
      checkdiv1.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
 
     } 
 
    } 
 

 
    checkdiv1.onclick = function() { 
 
     var checkboxes = document.querySelectorAll('input.div1'); 
 
     for(var i=0; i<checkboxes.length; i++) { 
 
      checkboxes[i].checked = this.checked;   
 
      $(checkboxes[i]).trigger('change'); 
 
     } 
 
    } 
 

 
    \t var checkboxes = document.querySelectorAll('input.div2'); 
 
    var checkdiv2 = document.getElementById('checkdiv2'); 
 

 
    for(var i=0; i<checkboxes.length; i++) { 
 
     checkboxes[i].onclick = function() { 
 
      var checkedCount = document.querySelectorAll('input.div2:checked').length; 
 

 
      checkdiv2.checked = checkedCount > 0; 
 
      checkdiv2.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length; 
 
     } 
 
    } 
 

 
    checkdiv2.onclick = function() { 
 
     var checkboxes = document.querySelectorAll('input.div2'); 
 
     for(var i=0; i<checkboxes.length; i++) { 
 
      checkboxes[i].checked = this.checked; 
 
      $(checkboxes[i]).trigger('change'); 
 
     } 
 
    } 
 
    
 
    $('.hideRow').click(function() { 
 
     $('input[value="' + $(this).attr('checkBoxValue') + '"]').trigger('click'); 
 
    }); 
 
});
.hide{ 
 
    visibility: hidden; 
 
} 
 

 
label { 
 
    display:block 
 
} 
 

 
label:first-child { 
 
    font-weight:bold; 
 
} 
 

 
label:nth-child(n+2) { 
 
    margin-left:1em; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div> 
 
\t <label><input type="checkbox" id="checkdiv1" checked> Division 1</label> 
 
<label><input type="checkbox" class="div1 show" value="d1" checked> Team 1</label> 
 
<label><input type="checkbox" class="div1 show" value="d2" checked > Team 2</label> 
 
<label><input type="checkbox" class="div1 show" value="d3" checked> Team 3</label></div> 
 
<div> 
 
<label><input type="checkbox" id="checkdiv2" checked> Division 2</label> 
 
<label><input type="checkbox" class="div2 show" value="r1" checked> Team 1</label> 
 
<label><input type="checkbox" class="div2 show" value="r2" checked > Team 2</label> 
 
<label><input type="checkbox" class="div2 show" value="r3" checked> Team 3</label></div> 
 
<br> 
 
<hr> 
 
    
 
<br> 
 
<table border="1"> 
 
    <tbody> 
 
    \t <tr>    
 
      <td></td> 
 
      <td >Teams</td> 
 
      <td>Points For</td> 
 
      <td>Points Against</td> 
 
     </tr> 
 
     <tr class="d1"> 
 
      <td><button class="hideRow" checkBoxValue="d1">Hide</button></td> 
 
      <td>Division 1 Team 1</td> 
 
      <td>280</td> 
 
      <td>100</td> 
 
     </tr> 
 
     <tr class="d2"> 
 
      <td><button class="hideRow" checkBoxValue="d2">Hide</button></td> 
 
      <td>Division 1 Team 2</td> 
 
      <td>225</td> 
 
      <td>150</td> 
 
     </tr> 
 
     <tr class="d3"> 
 
      <td><button class="hideRow" checkBoxValue="d3">Hide</button></td> 
 
      <td>Division 1 Team 3</td> 
 
      <td>187</td> 
 
      <td>223</td> 
 
     </tr> 
 
     <tr class="r1"> 
 
      <td><button class="hideRow" checkBoxValue="r1">Hide</button></td> 
 
      <td>Division 2 Team 1</td> 
 
      <td>330</td> 
 
      <td>185</td> 
 
     </tr> 
 
     <tr class="r2"> 
 
      <td><button class="hideRow" checkBoxValue="r2">Hide</button></td> 
 
      <td>Division 2 Team 2</td> 
 
      <td>267</td> 
 
      <td>225</td> 
 
     </tr> 
 
     <tr class="r3"> 
 
      <td><button class="hideRow" checkBoxValue="r3">Hide</button></td> 
 
      <td>Division 2 Team 3</td> 
 
      <td>223</td> 
 
      <td>150</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

+0

Спасибо Chitrang, мне было интересно, можете ли вы помочь мне в еще одном. Я хочу добавить кнопку в первом столбце каждой строки, которая скроет эту конкретную строку, а также снимет соответствующий флажок вверху. – jta

+0

Обновлен ответ для добавления кнопки. – Chitrang

0

Вы можете сделать все это в своем обработчике изменений. Вы должны будете пересмотреть свою разметку в небольшой степени, но это довольно просто. Я добавил data-target и data-nodes родительским флажкам, а d и r классов в строки таблицы.

HTML

<div> 
    <label><input type="checkbox" data-target="d" data-nodes=".div1" checked>Division 1</label> 
    <label><input type="checkbox" class="div1 show" value="d1" checked>Team 1</label> 
    <label><input type="checkbox" class="div1 show" value="d2" checked>Team 2</label> 
    <label><input type="checkbox" class="div1 show" value="d3" checked>Team 3</label> 
</div> 
<div> 
    <label><input type="checkbox" data-target="r" data-nodes=".div2" checked>Division 2</label> 
    <label><input type="checkbox" class="div2 show" value="r1" checked>Team 1</label> 
    <label><input type="checkbox" class="div2 show" value="r2" checked>Team 2</label> 
    <label><input type="checkbox" class="div2 show" value="r3" checked>Team 3</label> 
</div> 
<br> 
<hr> 
<br> 
<table border="1"> 
    <tbody> 
     <tr> 
      <td>Teams</td> 
      <td>Points For</td> 
      <td>Points Against</td> 
     </tr> 
     <tr class="d d1"> 
      <td>Division 1 Team 1</td> 
      <td>280</td> 
      <td>100</td> 
     </tr> 
     <tr class="d d2"> 
      <td>Division 1 Team 2</td> 
      <td>225</td> 
      <td>150</td> 
     </tr> 
     <tr class="d d3"> 
      <td>Division 1 Team 3</td> 
      <td>187</td> 
      <td>223</td> 
     </tr> 
     <tr class="r r1"> 
      <td>Division 2 Team 1</td> 
      <td>330</td> 
      <td>185</td> 
     </tr> 
     <tr class="r r2"> 
      <td>Division 2 Team 2</td> 
      <td>267</td> 
      <td>225</td> 
     </tr> 
     <tr class="r r3"> 
      <td>Division 2 Team 3</td> 
      <td>223</td> 
      <td>150</td> 
     </tr> 
    </tbody> 
</table> 

JQuery

$('input[type = checkbox]').change(function() { 
    var nodes = $(this).data("nodes"); 
    var target = $(this).data("target"); 
    var valu = $(this).val(); 
    var ischecked = $(this).is(":checked"); 

    // If the nodes data attribute exists, use its value 
    if (target) { 
     valu = target; 
    } 

    if (ischecked) { 
     $('.' + valu).show(); 
     $(nodes).prop('checked', true); 
    } else { 
     $('.' + valu).hide(); 
     $(nodes).prop('checked', false); 
    } 
}); 

Смотрите эту скрипку: https://jsfiddle.net/sv59w5m2/2/

Смежные вопросы