if/else를 사용하여 체크 박스가있는 div 표시/숨기기

HTML/CSS 이후의 모든 코딩 유형이 완전히 새로워졌습니다. 주변을 둘러 보았지만 특정 문제에 대한 솔루션을 적용하는 방법을 잘 모릅니다. 나는 같은 체크 박스의 목록을 가지고 :if/else를 사용하여 체크 박스가있는 div 표시/숨기기

<input type="checkbox" value="de-borders" /> Choose my border

당신이 (5 확인란 거기에) 제출 버튼을 누르면 때, 체크 사람의 div의를 표시하기로했다. 그래서 함수의 제출에 대한 href에 링크되어 있습니다. 문제는 사용자가 상자의 고정을 해제하고 다시 제출하면 해당 상자가 사라져야한다는 것입니다. 이것은 내가 무엇을 가지고

는

(I 그래서 나는 완전히 그것을 얻을하지 않습니다 도움이 있었다) : 나는이 '경우'는 문제가

var show_panels =(function(){ 
    $("#de-options input").each(function(index, element) { 
     var val = $(element).attr('value'); 
     if ($("#de-options input").is(":checked")) 
     { 
      $('#' + val).show(); 
     } 
     else 
     { 
      $('#' + val).hide(); 
     } 
     }); 
    });

. 왜냐하면. 각각 나는 어떻게 체크 박스를 봐야 하는지를 알지 못한다. 왜냐하면 내가 가지고있는 '$ de-options'이 이제는 내가 상관없이 모든 것을 보여주기 때문이다. 확인했다.

그래서 저는 정말로 '만약'을 위해 무엇을 넣어야하는지 알고 싶습니다.

도움 주셔서 감사합니다.

출처

2012-04-26 anubis

$("#de-options input[type='checkbox']").each(function() { 
     var val = $(this).val(); 
     if($(this).is(':checked')) { 
      $('#' + val).show(); 
     } else { 
      $('#' + val).hide(); 
     } 
    });

출처

2012-04-26 17:19:45 thecodeparadox

작성하지 작업 샘플입니다':.'인도어 ates 메타 셀렉터, 첫 번째 것은'[type = checkbox]'이어야하고, 두 번째 것은 맞다 – Endophage

"val"이라는 변수를 "$ (요소) .attr ('value');"로 설정합니다. 귀하의 예제에서, 체크 박스의 값은 "de-borders"이므로이 경우 val = "de-borders"... 지금까지 괜찮습니다. 그러나 if 문에서 $ ('#'+ val) 또는 $ ('# de-borders')를 숨기려고합니다. 존재하지 않는 경계선없는 ID로 페이지의 요소를 숨기는 것입니다.

대신 if/else의 내용을 다음으로 바꾸십시오. $ (요소) .show(); 및 $ (요소) .hide();

출처

2012-04-26 17:27:58 CashIsClay

이것은 정확히 내가 필요로하는 것입니다. 고맙습니다! 그리고 당신의 모든 반응에 감사드립니다. :) – anubis

HTML이 어떻게 보이는지 잘 모르겠습니다. 이것을 가정하면 이것이 효과가 있습니다.

HTML

<div id="de-options"> 
    <input type="checkbox" value="de-borders" /> Choose First 
    <input type="checkbox" value="de-borders2" /> Choose Srcond 
    <input type="checkbox" value="de-borders3" /> Choose Third 
</div> 

<div id="de-borders"> Div One</div> 
<div id="de-borders2">Div Two</div> 
<div id="de-borders3">Div Three</div> 

<input type="submit" value="save" />

스크립트

$은 (함수() {여기

$("input[type='submit']").click(function(e){ 
     e.preventDefault(); 

    $("#de-options input[type='checkbox']").each(function() { 
     var item= $(this); 
     var val = item.attr('value'); 
     if (item.is(":checked")) 
     { 
     $('#' + val).show(); 
     } 
     else 
     { 
      $('#' + val).hide(); 
     } 
    }); 
    }); 

});

이 http://jsfiddle.net/hzpVy/15/

출처

2012-04-26 17:34:55 Shyju

if/else를 사용하여 체크 박스가있는 div 표시/숨기기

답변

관련 문제