Question

我想显示复选框中选中的特定行的内容

HTML：

<input type="checkbox" checked>All
<input type="checkbox">One
<input type="checkbox">Two
<input type="checkbox">Three
<table border="2">
<tr class="one">
<td>1 </td>
<td>one</td>
</tr>
<tr class="two">
<td>2</td>
<td>two</td>
</tr>
<tr class="three">
<td>3
</td>
<td>three</td>
</tr>
</table>

JS：

<script>
if ($('.one').is(":checked")) {
        $("input:checkbox").text();
  // it is checked
}

if ($('.two').is(":checked")) {
        $("input:checkbox").text();
  // it is checked
}

if ($('.three').is(":checked")) {
        $("input:checkbox").text();
  // it is checked
}
</script>

我希望仅在选中该行后才能获得该行的数据，并且默认情况下应显示所有值。

Answer 1

您应与另一组复选框分开处理对“全部” 复选框的操作。

此外，如果“ all” 实际上被选中，则取消所有其他复选框也没有意义。全部就是全部。所以检查所有！

不要使用类，选择器有一天可能会变得笨拙或不正确，而是使用data-*属性：

const $tog = $('.tog'),
  $all = $tog.filter('[value="all"]'),
  $num = $tog.not('[value="all"]'),
  $row = $('[data-row]');

function rowToggler() {
  const val = this.value;

  if (val === 'all') {

    $num.prop('checked', this.checked);      // handle group
    $row.toggleClass('none', !this.checked); // and all rows

  } else {

    $all.prop('checked', $num.filter(':checked').length === $num.length); // handle all
    $row.filter((i, el) => $(el).data('row') === val).toggleClass('none', !this.checked); // and specific rows

  }
}

$tog.on('change', rowToggler);
rowToggler.call($all[0]); // Dry init

.none {
  display: none;
}

<input type="checkbox" class="tog" value="all" checked>All

<input type="checkbox" class="tog" value="one">One
<input type="checkbox" class="tog" value="two">Two
<input type="checkbox" class="tog" value="three">Three

<table border="2">
  <tr data-row="one">
    <td>1</td>
    <td>one</td>
  </tr>
  <tr data-row="two">
    <td>2</td>
    <td>two</td>
  </tr>
  <tr data-row="three">
    <td>3</td>
    <td>three</td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

Answer 2

首先，您要捕获所有复选框单击。使用$('input[type=checkbox').click()捕获这些点击事件

然后，您要确定单击了哪个复选框。如果选中“所有”复选框，则要进行一组测试；如果其他复选框，则要进行其他操作。

演示：

$('input[type=checkbox').click(function(){
   //get id, arrayize on underscore, take 2nd arr element eg. two
   let nom = this.id.split('_')[1];

   if (nom == 'all'){
      if ( $(this).is(':checked') ){
         uncheck_all_checkboxes();
         show_all_table_rows();
      }else{
         alert('Now, you finish making it hide all rows');
      }
   }else{
      $('#cb_all').prop('checked', false);
      verify_all_checkboxes();
   }
});
function verify_all_checkboxes(){
   $('input[type=checkbox').each(function(idx, el){
      var nom = this.id.split('_')[1];
      if ( !$(el).is(":checked")) {
         console.log(nom);
         $('table').find('tr.' + nom).addClass('hidden');
      }else{
         $('table').find('tr.' + nom).removeClass('hidden');
      }
   });
}
function uncheck_all_checkboxes(){
   $('input[type=checkbox').each(function(idx, el){
      var nom = this.id.split('_')[1];
      if (nom !== 'all'){
         $(this).prop('checked', false);
      }
   });
}
function show_all_table_rows(){
   $('table tr').removeClass('hidden');
}

.hidden{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="cb_all" type="checkbox" checked>All
<input id="cb_one" type="checkbox">One
<input id="cb_two" type="checkbox">Two
<input id="cb_three" type="checkbox">Three
<table border="2">
  <tr class="one">
    <td>1 </td>
    <td>one</td>
  </tr>
  <tr class="two">
    <td>2</td>
    <td>two</td>
  </tr>
  <tr class="three">
    <td>3
    </td>
    <td>three</td>
  </tr>
</table>

Answer 3

我只是using System; namespace HelloWorld { class Hello { static void Main() { Console.WriteLine("Hello World!"); // Keep the console window open in debug mode. Console.WriteLine("Press any key to exit."); Console.ReadKey(); } } }类的.addClass()和.removeClass()。

.hide

//<![CDATA[
/* js/external.js */
$(function(){ // jQuery load start
var check_all = $('#check_all'), check_one = $('#check_one'), check_two = $('#check_two'), check_three = $('#check_three'), trs = $('#output_table>tbody>tr'), tr1 = trs.eq(0), tr2 = trs.eq(1), tr3 = trs.eq(2);
check_one.click(function(){
  if(check_one.is(':checked')){
    tr1.removeClass('hide');
  }
  else{
    tr1.addClass('hide');
  }
});
check_two.click(function(){
  if(check_two.is(':checked')){
    tr2.removeClass('hide');
  }
  else{
    tr2.addClass('hide');
  }
});
check_three.click(function(){
  if(check_three.is(':checked')){
    tr3.removeClass('hide');
  }
  else{
    tr3.addClass('hide');
  }
});
check_all.click(function(){
  var cv = check_all.is(':checked');
  $('.indi').each(function(i, e){
    $(e).prop('checked', cv);
  });
  if(cv){
    trs.removeClass('hide');
  }
  else{
    trs.addClass('hide');
  }
});
}); // jQuery load end
//]]>

*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px;
}
.hide{
  display:none;
}
label{
  display:inline-block; margin-left:3px;
}

控件元素带有复选框显示

3 个答案:

演示：