jQuery를checkbox
사용하여 틱하기 위해 이와 같은 작업을 수행하고 싶습니다 .
$(".myCheckBox").checked(true);
또는
$(".myCheckBox").selected(true);
그런 것이 있습니까?
$("#mycheckbox").click();
jQuery를checkbox
사용하여 틱하기 위해 이와 같은 작업을 수행하고 싶습니다 .
$(".myCheckBox").checked(true);
또는
$(".myCheckBox").selected(true);
그런 것이 있습니까?
$("#mycheckbox").click();
답변:
사용 .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
하나의 요소로 작업하는 경우 항상 기본에 액세스 HTMLInputElement
하고 .checked
속성을 수정할 수 있습니다.
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
이 대신 .prop()
및 .attr()
메소드 를 사용하면 일치하는 모든 요소에서 작동한다는 이점 이 있습니다.
이 .prop()
방법을 사용할 수 없으므로를 사용해야 .attr()
합니다.
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
이 방법 은 버전 1.6 이전의 jQuery 단위 테스트에서 사용 된 접근 방식 이며 $('.myCheckbox').removeAttr('checked');
, 후자가 상자를 처음 확인한 경우 호출 동작 .reset()
을 포함하는 모든 형식 에서 호출 동작을 변경하기 때문에 사용하는 것이 좋습니다. 반갑지 않은 행동 변화.
더 많은 맥락을 위해, checked
1.5.x에서 1.6으로의 전환에서 속성 / 프로퍼티 처리에 대한 변경 사항에 대한 불완전한 논의 는 버전 1.6 릴리스 정보 및 문서 의 속성 대 특성 섹션 에서 찾을 수 있습니다 ..prop()
DOMElement.checked = true
." 그러나 그것은 하나의 요소 일 뿐이므로 무시할 수있을 것입니다.
$(element).prop('checked')
입력하는 것은 완전히 낭비입니다. element.checked
존재하는 경우에 사용해야합니다element
사용하다:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
확인란이 선택되어 있는지 확인하려면 다음을 수행하십시오.
$('.myCheckbox').is(':checked');
이것은 jQuery를 사용하여 확인란을 선택하고 선택 취소하는 올바른 방법입니다. 플랫폼 간 표준이므로 양식을 다시 게시 할 수 있습니다.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
이렇게하면 확인란을 선택 및 선택 해제하기 위해 JavaScript 표준을 사용하므로 확인란 요소의 "checked"속성을 올바르게 구현하는 모든 브라우저는이 코드를 완벽하게 실행합니다. 이것은 모든 주요 브라우저 여야 하지만 Internet Explorer 9 이전에는 테스트 할 수 없습니다.
문제 (jQuery 1.6) :
사용자가 확인란을 클릭하면 해당 확인란이 "선택된"속성 변경에 응답하지 않습니다.
다음은 누군가가 확인란 을 클릭 한 후 작업을 수행하지 못하는 확인란 속성의 예입니다 (Chrome에서 발생).
해결책:
DOM 요소 에 JavaScript의 "checked"속성을 사용하면 DOM 을 조작하여 원하는 작업을 수행하는 대신 문제를 직접 해결할 수 있습니다.
이 플러그인은 jQuery가 선택한 요소의 checked 속성을 변경하고 모든 상황에서 확인란을 성공적으로 선택 및 선택 취소합니다. 따라서 이것이 과장된 솔루션처럼 보일 수 있지만 사이트의 사용자 환경을 개선하고 사용자 불만을 예방하는 데 도움이됩니다.
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery );
또는 플러그인을 사용하지 않으려는 경우 다음 코드 스 니펫을 사용할 수 있습니다.
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});
removeAttr('checked')
보다는attr('checked', false)
checked
변경에 사용 된 방법에 관계없이 브라우저가 더 이상 속성 변경에 응답하지 않음 을 보여줍니다.
$('.myCheckBox').prop('checked', true)
이렇게하면 일치하는 전체 요소 세트에 자동으로 적용됩니다 (설정하는 경우에만, 얻는 것이 여전히 첫 번째
prop
요소에 속성을 설정하는 적절한 방법입니다.
넌 할 수있어
$('.myCheckbox').attr('checked',true) //Standards compliant
또는
$("form #mycheckbox").attr('checked', true)
실행하려는 확인란의 onclick 이벤트에 사용자 지정 코드가있는 경우 대신이 코드를 사용하십시오.
$("#mycheckbox").click();
속성을 완전히 제거하여 선택을 취소 할 수 있습니다.
$('.myCheckbox').removeAttr('checked')
다음과 같은 모든 확인란을 선택할 수 있습니다.
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
$(".myCheckbox").click()
.attr
대신 사용하기 때문에 오래되었습니다 .prop
.
$("#mycheckbox").click();
내가 변화 이벤트를 듣고 있었고 .attr
& .prop
변화 이벤트를 시작하지 않았기 때문에 나를 위해 일했습니다 .
새로운 방법으로 $ .fn 객체를 확장 할 수도 있습니다.
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
그럼 당신은 할 수 있습니다 :
$(":checkbox").check();
$(":checkbox").uncheck();
또는 해당 이름을 사용하는 다른 라이브러리를 사용하는 경우 mycheck () 및 myuncheck ()와 같이 고유 한 이름을 지정할 수 있습니다.
.attr
대신 사용하기 때문에 오래되었습니다 .prop
.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
마지막 하나는 체크 박스의 클릭 이벤트를 발생시키고 다른 하나는 그렇지 않습니다. 따라서 onclick 이벤트에 실행하려는 확인란의 사용자 지정 코드가있는 경우 마지막 코드를 사용하십시오.
.attr
대신 사용하기 때문에 오래되었습니다 .prop
.
click
Firefox 및 Edge에서는 IMO 이벤트를 신뢰할 수 없습니다.
확인란을 선택하려면 사용해야합니다
$('.myCheckbox').attr('checked',true);
또는
$('.myCheckbox').attr('checked','checked');
확인란의 선택을 취소하려면 항상 false로 설정해야합니다.
$('.myCheckbox').attr('checked',false);
당신이 할 경우
$('.myCheckbox').removeAttr('checked')
속성을 모두 제거하므로 양식을 재설정 할 수 없습니다.
나쁜 데모 jQuery 1.6 . 나는 이것이 깨 졌다고 생각한다. 1.6을 위해 나는 그것에 대해 새로운 게시물을 만들 것입니다.
새로운 작업 데모 jQuery 1.5.2 는 Chrome에서 작동합니다.
두 데모 모두
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
$(".mycheckbox").prop("checked", true/false)
질문이 있다고 가정하면 ...
일반적인 확인란 세트에서 모든 입력 태그의 이름은 동일 하며 속성에 따라 다릅니다value
. 세트의 각 입력에 대한 ID는 없습니다.
Xian의 답변은 다음 코드 줄을 사용하여 보다 구체적인 선택기 로 확장 할 수 있습니다 .
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
해결책이 없습니다. 나는 항상 사용할 것이다 :
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
.val()
항상 반환 undefined
되는 jself 객체가 비어 있음을 감지하기 위해 항상 반환 되는 자명하지 않은 사실을 이용하고 있습니다. 단순히를 확인 .length
) 대신 - 참조 stackoverflow.com/questions/901712/...을 더 읽기 방법에 대해.
jQuery 1.6 이상을 사용하여 확인란을 선택하려면 다음을 수행하십시오.
checkbox.prop('checked', true);
선택을 해제하려면 다음을 사용하십시오.
checkbox.prop('checked', false);
jQuery를 사용하여 확인란을 토글하는 데 사용하고 싶은 것은 다음과 같습니다.
checkbox.prop('checked', !checkbox.prop('checked'));
jQuery 1.5 이하를 사용하는 경우 :
checkbox.attr('checked', true);
선택을 해제하려면 다음을 사용하십시오.
checkbox.attr('checked', false);
다음은 jQuery없이 수행하는 방법입니다
function addOrAttachListener(el, type, listener, useCapture) {
if (el.addEventListener) {
el.addEventListener(type, listener, useCapture);
} else if (el.attachEvent) {
el.attachEvent("on" + type, listener);
}
};
addOrAttachListener(window, "load", function() {
var cbElem = document.getElementById("cb");
var rcbElem = document.getElementById("rcb");
addOrAttachListener(cbElem, "click", function() {
rcbElem.checked = cbElem.checked;
}, false);
}, false);
<label>Click Me!
<input id="cb" type="checkbox" />
</label>
<label>Reflection:
<input id="rcb" type="checkbox" />
</label>
다음은 버튼으로 확인하거나 선택 해제하는 코드입니다.
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
});
set=unset;
});
});
업데이트 : 다음은 최신 Jquery 1.6 이상 prop 메소드를 사용하는 동일한 코드 블록으로 attr을 대체합니다.
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
});
set=unset;
});
});
.attr
대신 사용하기 때문에 오래되었습니다 .prop
.
elementObject
속성을 확인하기 위해 jQuery와 함께 사용할 수 있습니다 .
$(objectElement).attr('checked');
오류없이 모든 jQuery 버전에 사용할 수 있습니다.
업데이트 : Jquery 1.6 이상에는 attr을 대체하는 새로운 prop 메소드가 있습니다.
$(objectElement).prop('checked');
.attr
대신 사용하기 때문에 오래되었습니다 .prop
.
다음은 여러 확인란을 선택하는 방법에 대한 코드와 데모입니다.
http://jsfiddle.net/tamilmani/z8TTt/
$("#check").on("click", function () {
var chk = document.getElementById('check').checked;
var arr = document.getElementsByTagName("input");
if (chk) {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = true;
}
} else {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = false;
}
}
});
$("#check")
원시 DOM API 호출과 같은 jQuery 선택기를 혼합 document.getElementsByTagName("input")
하는 것은 나에게 적합하지 않은 것 같습니다. 특히 for
여기서 루프 를 사용하면 루프를 피할 수 있습니다 .prop()
. 그럼에도 불구하고 이것은 새로운 것을 추가하지 않는 또 다른 늦은 답변입니다.
또 다른 가능한 해결책 :
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
@ livefree75가 말했듯이 :
jQuery 1.5.x 이하
새로운 방법으로 $ .fn 객체를 확장 할 수도 있습니다.
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
그러나 새 버전의 jQuery에서는 다음과 같은 것을 사용해야합니다.
jQuery 1.6 이상
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").prop("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").prop("checked",false);
}
});
}(jQuery));
그럼 당신은 할 수 있습니다 :
$(":checkbox").check();
$(":checkbox").uncheck();
jQuery 문서가 다음 과 같이 Internet Explorer 9 이전의 Internet Explorer에서 메모리 누수를 인식하십시오 .
버전 9 이전의 Internet Explorer에서 .prop ()를 사용하여 DOM 요소 특성을 단순한 기본 값 (숫자, 문자열 또는 부울) 이외의 값으로 설정하면 특성이 제거되지 않으면 (.removeProp ( )) DOM 요소가 문서에서 제거되기 전에. 메모리 누수없이 DOM 객체에 값을 안전하게 설정하려면 .data ()를 사용하십시오.
.prop('checked',true)
.
확인 및 선택 해제
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
다음을 사용하여 작동시키지 못했습니다.
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
true와 false 모두 확인란을 선택합니다. 나를 위해 일한 것은 다음과 같습니다.
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
true
및 false
하지 'true'
와 'false'
?
'false'
부울 값으로 변환 되었기 때문에 "작동하지 않았습니다" true
-빈 문자열 false
이 "작동"한 것으로 평가됩니다 . 내가 무슨 뜻인지 예를 들어이 바이올린 을 보십시오 .
같은 확인란을 선택하면;
$('.className').attr('checked', 'checked')
충분하지 않을 수 있습니다. 또한 아래 함수를 호출해야합니다.
$('.className').prop('checked', 'true')
특히 확인란이 선택된 속성을 제거했을 때.
다음은 jQuery를 사용한 완전한 답변입니다.
나는 그것을 테스트하고 100 % 작동합니다 : D
// when the button (select_unit_button) is clicked it returns all the checed checkboxes values
$("#select_unit_button").on("click", function(e){
var arr = [];
$(':checkbox:checked').each(function(i){
arr[i] = $(this).val(); // u can get id or anything else
});
//console.log(arr); // u can test it using this in google chrome
});
jQuery에서
if($("#checkboxId").is(':checked')){
alert("Checked");
}
또는
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
자바 스크립트에서
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
.attr
대신 사용하기 때문에 오래되었습니다 .prop
.