Question

我有数据来自datasbase和带有复选框的表：

    <tbody>
        <tr class="full_qst">
            <td><?php echo $driver; ?></td>
            <td><?php echo $subdriver; ?></td>
            <td><?php echo $skill; ?></td>
            <td> <img alt="" src="imagesAssessment/check.png" class="check">
                <div class="mrk">
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
                </div>   
                <input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" /> 
                <input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />    
            </td>
        </tr>
    </tbody>

我想检查当前行的复选框是否已选中，如果是，则将图像显示为可见，如果没有，则再次将其隐藏：

$('input.q').on('change', function() {
   $(this).parents('.full_qst').find(".q[name='"+$(this).attr("name")+"']").not(this).prop('checked',false);
    if($(this).parents('.full_qst').find(".q[name='"+$(this).attr("name")+"']").length === 0)
    { $(this).parents('.full_qst').find('.check').css('visibility', 'hidden'); }
    else { $(this).parents('.full_qst').find('.check').css('visibility', 'visible'); }
});

但它不起作用，我该如何解决这个问题？

Answer 1

您需要使用closest()来获取tr。之后，获取length选中的复选框，如果length＆gt; 0，show image其他hide。

＆＃13;

$('input.q').on('change', function() {
  if ($(this).closest('tr').find('input:checked').length > 0) {
    $(this).closest('tr').find('.check').show();
  } else {
    $(this).closest('tr').find('.check').hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="full_qst">
      <td>

      </td>
      <td>

      </td>
      <td>

      </td>
      <td> <img alt="" src="imagesAssessment/check.png" class="check" />
        <div class="mrk">
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
        </div>
        <input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" />
        <input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />
      </td>
    </tr>
    <tr class="full_qst">
      <td>

      </td>
      <td>
      </td>
      <td>
      </td>
      <td> <img alt="" src="imagesAssessment/check.png" class="check">
        <div class="mrk">
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
          <label class="choice" for="q1_a"><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
        </div>
        <input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" />
        <input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

这是你想要的吗？您可以使用类 mrk 搜索div下的每个复选框，并检查是否已选中一个。然后显示或隐藏图像。

＆＃13;

$('input.q').on('change', function() {
   
   if($('.mrk').find('input[type="checkbox"]').is(':checked')){
	$('.check').hide(); 
   }
   else
   {
   	$('.check').show(); 
   }
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
        <tr class="full_qst">
            <td><?php echo $driver; ?></td>
            <td><?php echo $subdriver; ?></td>
            <td><?php echo $skill; ?></td>
            <td> <img alt="" src="http://technofriends.files.wordpress.com/2008/07/google-test-framework.png" class="check">
                <div class="mrk">
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $low ?>"/>1</label>
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $middle ?>"/>2</label>
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $good ?>"/>3</label>
                    <label class="choice" for="q1_a" ><input class="q" name="q1_a[]" type="checkbox" value="<?php echo $vrgood ?>"/>4</label>
                </div>   
                <input id="q" name="q[]" type="hidden" value="<?php echo $id; ?>" /> 
                <input name="dep[]" type="hidden" value="<?php echo $dep; ?>" />    
            </td>
        </tr>
    </tbody>

＆＃13;

Answer 3

这对你有用

$('input.q').on('change', function() {
    $(this).parents('.full_qst').find(".q[name='"+$(this).attr("name")+"']").not(this).prop('checked',false);
    if($(".q[name='"+$(this).attr("name")+"']:checked").length === 0){ 
        $(this).parents('.full_qst').find('.check').css('visibility', 'hidden');
    } else {
        $(this).parents('.full_qst').find('.check').css('visibility', 'visible'); 
    }
});

如何检查是否取消选中复选框

3 个答案: