顯示基於複選框的span標記使用jquery選中或未選中

Question

我在ASP.NET MVC3, 中有下面的視圖頁面基於複選框選擇，我需要顯示關聯的span標記。

例：

在第一個標籤，第一個TD有span標記，第二個TD有複選框，第3 TD有一些消息。
如果複選框被選中，則隱藏第一個td中的span標籤。
如果複選框未選中，則顯示span標籤。
我需要顯示特定於特定複選框的span標記被選中或未選中。

樣本實施例：
如果第一個複選框被選中，隱藏跨度標籤，它是在同1
如果第二複選框選中，表演跨度標籤，它是在相同的第二

現在我已經想知道我將如何去，顯示基於複選框選擇的span標籤，任何人都可以幫助我。

<table> 
    <tr> 
     <td> 
      <span id="errorMsg1" class='errorMessage' style="display: none; color: red; font-size: 25px;">*</span> 
     <\td> 
     <td> 
      @Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus1", name = "cbCheckedStatus" }) 
     </td> 
     <td>Message1</td> 
    </tr> 
    <tr> 
     <td> 
      <span id="errorMsg2" class='errorMessage' style="display: none; color: red; font-size: 25px;">*</span> 
     <\td> 
     <td> 
      @Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus2", name = "cbCheckedStatus" }) 
     </td> 
     <td>Message2</td> 
    </tr> 
    <tr> 
     <td> 
      <span id="errorMsg3" class='errorMessage' style="display: none; color: red; font-size: 25px;">*</span> 
     <\td> 
     <td> 
      @Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus3", name = "cbCheckedStatus" }) 
     </td> 
     <td>Message3</td> 
    </tr> 
    <tr> 
     <td> 
      <span id="errorMsg4" class='errorMessage' style="display: none; color: red; font-size: 25px;">*</span> 
     <\td> 
     <td> 
      @Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus4", name = "cbCheckedStatus" }) 
     </td> 
     <td>Message4</td> 
    </tr> 
    <tr> 
     <td> 
      <span id="errorMsg5" class='errorMessage' style="display: none; color: red; font-size: 25px;">*</span> 
     <\td> 
     <td> 
      @Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus5", name = "cbCheckedStatus" }) 
     </td> 
     <td>Message5</td> 
    </tr> 
    <tr> 
     <td> 
      <span id="errorMsg6" class='errorMessage' style="display: none; color: red; font-size: 25px;">*</span> 
     <\td> 
     <td> 
      @Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus6", name = "cbCheckedStatus" }) 
     </td> 
     <td>Message6</td> 
    </tr> 
    <tr> 
     <td> 
      <span id="errorMsg7" class='errorMessage' style="display: none; color: red; font-size: 25px;">*</span> 
     <\td> 
     <td> 
      @Html.CheckBoxFor(m => m.CheckedStatus, new { id = "cbCheckedStatus7", name = "cbCheckedStatus" }) 
     </td> 
     <td>Message7</td> 
    </tr> 
</table> 

我的jQuery：

jQuery.ready(function domReady($) { 
    jQuery(function ($) { 
     $('#cbCheckedStatus7').on('change', function() { 
      $('#spBlueCheckbox').slideToggle(this.checked); 
     }); 
    }); 
    $('#BtnAccept').click(function() { 
     if ($('input:checkbox').length == $('input:checkbox:not(:checked)').length) { 
      alert('All are not checked') 
      $('input:checkbox:not(:checked)').addClass("outLineRed"); 
      $('.errorMessage').show(); 
      $('#errorMsg').show(); 
      $('#spMsgError').show(); 
      $('#spMsgError').html("Please confirm all the items above, and place a check mark in every confirmation box."); 
      $('#MsgSucc').attr("style", "background-color:White;"); 
      return false; 
     } 
     else if ($('input:checkbox').length != $('input:checkbox:checked').length) { 
      alert('few boxes not checked'); 

    //show only span tag whose checkboxes are not checked 

      $('input:checkbox:not(:checked)').addClass("outLineRed"); 
      $('input:checkbox:checked').removeClass("outLineRed"); 
      return false; 
     } 
     else { 
      alert('all are checked') 
      $('input:checkbox:checked').removeClass("outLineRed"); 
      $('.errorMessage').hide(); 
      $('#spMsgError').hide(); 
      $('#MsgSucc').attr("style", "background-color:#dfe5e6;"); 
     } 
    }); 
}); 

Answer 1

所有你需要的是使用jQuery Tree Traversal方法來查找相關span。

您可以修改下面的代碼，以適應你的目的，但這個想法將保持不變：

$(function() { 
    $('input[type="checkbox"]').on('click', function() { 
     $(this).parents('tr').find('span').slideToggle(this.checked); 
    }); 
}); 

注意你嵌套2個document ready事件處理程序，所以把它整理出來了。

Demo

jQuery Tree Traversal documentation

Answer 2

基礎上MelanciaUK的回答，我張貼這個答案几乎不做修改的問題點，並將其按預期工作。它會幫助其他人。

jQuery().ready(function domReady($) {  
    jQuery(function ($) { 
     $('#cbCheckedStatus7').on('change', function() {    
      $('#spBlueCheckbox').slideToggle(this.checked); 
     }); 
    }); 
    $('#BtnAccept').click(function() { 
     if ($('input:checkbox').length == $('input:checkbox:not(:checked)').length) {    
      $('input:checkbox:not(:checked)').addClass("outLineRed");   
      $('.errorMessage').show();   
      $('#spMsgError').show(); 
      $('#spMsgError').html("Please confirm all the items above, and place a check mark in every confirmation box."); 
      $('#MsgSucc').attr("style", "background-color:White;"); 
      return false; 
     } 
     else if ($('input:checkbox').length != $('input:checkbox:checked').length) { 
      $('input:checkbox:not(:checked)').each(function() { 
       $(this).parents('tr').find('span.errorMessage').show(!this.checked);    
      }); 
      $('input:checkbox:checked').each(function() { 
       $(this).parents('tr').find('span.errorMessage').hide(this.checked);    
      }); 
      $('input:checkbox:not(:checked)').addClass("outLineRed"); 
      $('input:checkbox:checked').removeClass("outLineRed");    
      return false; 
     } 
     else {    
      $('input:checkbox:checked').removeClass("outLineRed"); 
      $('.errorMessage').hide();   
      $('#spMsgError').hide(); 
      $('#MsgSucc').attr("style", "background-color:#dfe5e6;"); 
     }  
    });  
}); 

Answer 3

代替slideToggle，您可以使用切換。在IE10中，slideToggle有時會異常工作。

$('#spBlueCheckbox').slideToggle(this.checked); 

的上述下面

一個使用

$('#spBlueCheckbox').toggle(this.checked);