根據複選框值更改文本

我試圖根據複選框的當前值，是否選中或未檢查應更改文本值應向用戶聲明可查看文本的值。這是我所擁有的，我認爲我很接近但不會工作。根據複選框值更改文本

<html> 
<body> 

<style type="text/css"> 
    .red{ display: none;} 
    .blue{ display: none;} 
</style> 

<script> 
// Toggle Text 
$(document).ready(function(){ 
     $('input[type="checkbox"]').click(function(){ 

      if($(this).attr("value")=="red"){ 
       $(".Color").toggle(); 
      }else($(this).attr("value")=="blue"){ 
       $(".Color").toggle(); 
      } 

     }); 
    }); 

</script> 

    <div> 
     <label><input type="checkbox" name="colorCheckbox" value="Color"></label> 
     </div> 

    <div class="red">You have selected <strong>red checkbox</strong></div> 
    <div class="blue">You have selected <strong>red checkbox</strong> </div> 

</body> 
</html>

來源

2014-10-07 Blnukem

又會有怎樣的值更改爲「紅色」或「藍色」？ – tymeJV 2014-10-07 13:09:44

當jQuery運行以獲取attr（「value」）時，它將獲得「color」 – 2014-10-07 13:10:36

不確定你想要做什麼，但我稍微修改了你的示例代碼/ html。我假設你想根據連接的每一個div的顯示/隱藏當某些複選框被選中：下面

$(document).ready(function(){ 
     $('input[type="checkbox"]').click(function(){ 
      if($(this).is(":checked")) 
      { 
       $("." + $(this).val()).show(); 
      } 
      else{ 
       $("." + $(this).val()).hide(); 
      } 
     }); 
    });

小提琴： http://jsfiddle.net/whhvks0u/4/

來源

2014-10-07 13:26:17

嘗試爲

$(document).ready(function(){ 
      $('input[type="checkbox"]').click(function(){ 
       if($(this).is(":checked")) 
       { 
       alert("checked"); 
       } 
       else{ 
       alert("Un-checked"); 
       } 
       if($(this).val()=="red"){ 
        //$(".Color").toggle(); 
       } 
       else if($(this).val()=="blue"){ 
        //$(".Color").toggle(); 
       } 

      }); 
     });

DEMO

來源

2014-10-07 13:15:35 Amit

試試這個：

$('input[type="checkbox"]').change(function(e){ 
    if ($(this).is(':checked')) { 
    $('.' + $(this).val()).toggle(); 
    } 
});

這是假設你的input值是一樣的div類的名字之一。

來源

2014-10-07 13:20:16 Cue

你在找這樣的嗎？

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    </head> 
    <body> 
    <style type="text/css"> 
     .red { display: none;} 
     .blue { display: none;} 
    </style> 
    <script> 
     $(document).ready(function(){ 
      $('input[type="checkbox"]').click(function(){ 

       $(".color").each(function(){ 
        $(this).hide(); 
       }); 

       if($(this).is(":checked")){ 
        var color = $(this).attr("value"); 
        $("."+color).show(); 
       } 

      }); 
     }); 
    </script> 
    <div> 
     <input type="checkbox" name="colorCheckbox" value="red"> red 
     <input type="checkbox" name="colorCheckbox" value="blue"> blue 
    </div> 
    <div class="color red">You have selected <strong>red checkbox</strong></div> 
    <div class="color blue">You have selected <strong>blue checkbox</strong> </div> 
    </body> 
</html>

來源

2014-10-07 13:23:22 plexcell

根據複選框值更改文本

回答

相關問題