2013-07-11 8 views
1

나는 checkBox를 사용하여 이와 같은 작업을 수행하려고합니다. 사용자가 확인란을 클릭하면 상태가 변경됩니다 (선택 -> 선택 취소 및 vv).jQuery/Javascript 확인란

내 코드 :

$('#checkBoxStandard').change(function() { 
    clickedFormBoxen('standard'); 
}); 


function clickedFormBoxen(active){ 
if(active == 'standard'){ 

    if($('#checkBoxStandard').is(":checked")){ 

     $('#checkBoxStandard').prop("checked", false); 

    }else{ 

     $('#checkBoxStandard').prop("checked", true); 
    } 

    console.log('ac: '+$('#checkBoxStandard').is(':checked')); 
} 

불행하게도, 체크 박스를 다시 선택 해제되지 않습니다. 첫 번째 시간은 체크 박스가 체크되고 있지만 다시 클릭하면 아무 일도 일어나지 않는다.

이 코드를 사용하여 사용자 상호 작용이 아닌 함수 호출로 확인란의 상태를 변경할 수 있습니다.

저와 유감을 도와주세요 내 영어 ^^

+0

는 최대한 멀리 볼 수있는, 사용자 행동의 변화를 되돌릴 변경 이벤트가 발생합니다. 어떻게 체크 박스의 초기 상태를 설정합니까? – collapsar

답변

1

당신이 뭔가를 의미

$('#checkBoxStandard').removeAttr("checked"); 
+2

'checked' 속성을 조작하는 것은 [공식적으로 권장하지 않습니다] (http://api.jquery.com/prop/)입니다. – collapsar

0

시도? (jsFiddle)

당신이 효과적으로의 효과를 되돌릴 난 함수 clickedFormBoxen와 함께, 귀하의 질문에 내 의견에 mentionend했듯이

var respond = true; 

function manualCheck(state) 
{ 
    respond = false; 
    $('#checkbox').prop("checked", state); 
} 

$('#checkbox').change(function() 
{ 
    if (!respond) 
    { 
     respond = true; 
     return; 
    } 

    // Your code 
} 
0

HTML

<input type="checkbox" id="checkbox"> 
<label for="checkbox">Hey,check me!</label> 

자바 스크립트 체크 박스 요소에 대한 사용자 상호 작용 따라서 당신이 당신의 체크 박스 요소에 클릭 핸들러로부터의 변경 핸들러를 호출해야 할 것 같다 (내가 코드를 조금 간소화 한) :

function clickedFormBoxen(active) { 
    if (active == 'standard') { 
     $('#checkBoxStandard').prop("checked", !($('#checkBoxStandard').prop("checked"))); 
    } 
} 

$(document).ready(function(){ 
    $('#checkBoxStandard').change(function(e) { 
     clickedFormBoxen('standard'); 
     1; 
    }); 

    $('#checkBoxStandard').click(function(e) { 
     $('#checkBoxStandard').change(); 
     1; 
    }); 
}); 
+0

이제 한 번의 클릭으로 "clickedFormBoxen"이 2 회 호출되는 "문제"가 발생했습니다. 메신저 클릭 및 변경으로 당신과 같은 clickevent가 있다고하셨습니다. function proped ("checked", checkBoxStandard) prop ("checked") {0 (활성) == '표준')); \t \t ($은 ('#의 checkBoxStandard이')이다 ("선택").) 경우에 { \t \t \t 형태 = 활성; \t \t} else { \t \t \t form = null; \t \t} \t console.log ("mhh :"+ form); – Michael

+0

이것은 의도적으로 설계된 것입니다. 'clickedFormBoxen'에 대한 한 번의 호출은 사용자 액션에 의해 체크 박스를 토글하고, 두 번째는 변경을 수행합니다. 프로그래밍 방식으로 확인란을 설정하면 클릭 이벤트가 없으므로 하나의 호출 만 발생합니다. (적어도 메소드를 찾지 못한) 사용자가 클릭 한 후 자동 토글을 방지하거나 프로그래밍 방식으로 체크 박스 상태를 설정하는 대신 클릭 이벤트를 트리거하는 두 가지 옵션이 있습니다. 나는 당신의 전반적인 어플리케이션 디자인에 맞는지 여부를 모르겠습니다.) – collapsar