Checkbox를 클릭하면 JQuery Display div가 표시됩니다.

아래 제안 사항 덕분에 여기에 나온 코드가 있습니다. 대부분의 사람들은 거의 제안 된대로 일했지만 아무도 실제 세계와 접촉을 유지하지 못했습니다. 그 이유와 그 밖의 문제는 다음과 같습니다.Checkbox를 클릭하면 JQuery Display div가 표시됩니다.

아래 내용은 체크 박스가 선택 및 선택 해제 될 때 표시되고 사라지는 것으로 가정되는 3 개의 확인란과 일련의 DIVS를 제공합니다. 처음에는 시도해 봅니다. 각 체크 박스를 왼쪽에서 오른쪽으로 체크하면 문제의 컨텐츠가 각각 표시됩니다.

그러나 때로는 선택을 취소해도 콘텐츠가 숨겨지지 않는 경우가 있습니다. 두 번째 및 세 번째 확인란의 경우 테스트가 있습니다. 검색된 DIV 중 하나에는 "Greentooth"와 "Redtooth"두 가지가 모두 포함되어 있습니다. 두 번째 확인란을 선택하면 Greentooth를 사용하는 모든 사용자가 표시되고 세 번째 상자를 검사하면 Greentooth 항목과 함께 Redtooth 항목이 있기 때문에 추가 정보가 표시되지 않습니다. 이는 올바른 동작이지만 Greentooth (2nd) 확인란을 선택 취소하면 Greentooth 전용 DIVS를 숨겨야하지만 그렇지 않습니다. Redtooth DIVS의 선택을 취소하면 숨길 수도 있고 숨길 수도 있으며 첫 번째 체크 박스를 선택 취소하면 작동하지 않을 수도 있습니다.

따라서 JS/JQuery는 확인란의 CHECKED 결과에주의를 기울이지 만 나머지 확인란을 반복하여 상태를 확인하는 것처럼 보이지는 않습니다. 이 올바른지?

JQuery Listen and Live와 연주했지만 어디에도 가지 않았습니다. 나는 어떤 종류의 고리가 필요합니까?

내가 무슨 말을하는지 모르겠 으면 브라우저에 코드를 입력하고 몇 번 확인하고 선택을 취소하십시오.

도움 주셔서 감사합니다.

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 


</head> 
<body> 

<script type="text/javascript"> 

$(document).ready(function() 
{ 

    $("form[name=form1] input:checkbox").click(function() 
{ 
     $(".rightcolumn div:contains('"+this.value+"')").css("display", this.checked?"block":"none"); 
      }); 
      });  
</script> 

<div name="leftcolumn"> 

<form action="" method="post" name="form1" > 
    <label> 
    <input type="checkbox" id="Yoko" value="Sabretooth"> 
    Sabretooth 
    </label> 
    <label> 
    <input type="checkbox" id="Yoko-" value="Greentooth"> 
    Greentooth 
    </label> 
    <label> 
    <input type="checkbox" id="Ringo" value="Redtooth"> 
    Redtooth 
    </label> 
</form> 
    </div> 

    <div class="rightcolumn"> 
    <style type="text/css"> 
    label 
{ 
    font-weight: bold; 
} 


.hide 
{ 
    display: none; 
} 

.show 
{ 
    display: block; 
} 
    </style> 
     <div name="hider" class="hide"> 
     John Resig Sabretooth 
     </div> 
     <div name="hider" class="hide"> 
     George GreentoothMartin 
     </div> 
     <div name="hider" class="hide"> 
     Malcom John Greentooth GreentoothRedtoothSinclair 
     </div> 
     <div name="hider" class="hide"> 
     J. Ohn 
     </div> 
     <div name="hider" class="hide"> 
     George toothMartin 
     </div> 
     <div name="hider" class="hide"> 
     Malcom John Greentooth GreentoothRedtoothSinclair 
     </div> 
     <div name="hider" class="hide"> 
     J. Ohn 
     </div> 
    </div> 

</body> 
</html>

출처

2011-08-11 John Corbin

당신이 당신의 체크 박스에 값 속성을 추가 할 경우, 당신은 당신이 표시하려는 div의 선택하는 것을 사용할 수 있습니다 : 나는 여러 체크 박스에 대한 동일한 ID를 가지고 볼

$('input[type=checkbox]').click(function() 
{ 
    $("div:contains('"+$(this).val()+"')").toggle(); 
});

출처

2011-08-11 14:17:59 Gareth

$('input[type=checkbox]').click(function() 
{ 
$("div").each(function() 
    { 
    //a regex to match the text got from $(this).innerText or this.InnerHTML to $(this).val() 
    //if it returns true then 
    $(this).show(); 
    }) 
});

출처

2011-08-11 14:18:16 Baz1nga

을 유효한 HTML이 아닙니다. 하지만이 솔루션을 사용해 볼 수 있습니다.

<form name="form1" method="post" action=""> 
    <label> 
    <input type="checkbox" name="checkboxx1" value="john"> 
    Sabretooth</label> 
    <label> 
    <input type="checkbox" name="checkboxx2" value="ohnn"> 
    Greentooth</label> 
    <label> 
    <input type="checkbox" name="checkboxx3" value="xyz"> 
    Redtooth</label> 
</form> 

//I am setting the keyword to look for in the value field of each checkbox. 

    $(function(){ 

     $("form[name=form1] input:checkbox").click(function(){ 
     $("div:contains('"+this.value+"')").css("display", this.checked?"block":"none"); 
     }); 

    });

출처

2011-08-11 14:21:56 ShankarSangoli

Checkbox를 클릭하면 JQuery Display div가 표시됩니다.

답변

관련 문제