jQuery를 사용하여 체크박스에 대해 "체크" 설정
를 하고 checkboxjQuery 사용:
$(".myCheckBox").checked(true);
또는
$(".myCheckBox").selected(true);
그런 게 있어요?
모던 jQuery
사용방법:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
DOM API
하나의 요소만 사용하는 경우 언제든지 기본 요소에 액세스하여 해당 속성을 수정할 수 있습니다.
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
「 」를하는 .prop() ★★★★★★★★★★★★★★★★★」.attr()모든 일치 요소에서 동작하는 방식입니다.
jQuery 1.5.x 이하
.prop()메서드를 사용할 수 없으므로 를 사용해야 합니다.
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
이는 버전 1.6보다 이전 jQuery의 유닛 테스트에서 사용된 접근 방식이며, 이 접근 방식을 사용하는 것보다 선호됩니다.$('.myCheckbox').removeAttr('checked');후자의 경우 처음에 체크박스를 켜면 콜 동작이 해당 박스를 포함하는 모든 형태로 변경됩니다.이것은 미묘하지만 아마도 달갑지 않은 행동 변화입니다.
더 문맥에 , 「」의 불완전한 논의가 .checked1.5.x에서 1.6으로 이행할 때의 Attribute/property는 버전 1.6 릴리즈 노트 및 Attributes vs. 설명서의 속성 섹션.
용도:
$(".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 표준을 사용할 수 있으므로 체크박스 요소의 "체크된" 속성을 적절하게 구현하는 브라우저는 이 코드를 완벽하게 실행할 수 있습니다.이것은 모두 메이저브라우저이지만 Internet Explorer 9 이전 버전에서는 테스트할 수 없습니다.
문제(jQuery 1.6):
사용자가 체크박스를 클릭하면 해당 체크박스는 "체크된" 속성 변경에 대한 응답을 중지합니다.
다음은 Chrome에서 이 체크박스를 클릭한 후 작업을 수행할 수 없는 확인란 속성의 예입니다.
솔루션:
DOM 요소에서 JavaScript의 "체크된" 속성을 사용함으로써 DOM을 조작하여 원하는 작업을 수행하도록 하는 것이 아니라 문제를 직접 해결할 수 있습니다.
이 플러그인은 jQuery에 의해 선택된 요소의 선택된 속성을 변경하고 모든 상황에서 체크박스를 켜고 끕니다.따라서, 이 솔루션이 과도한 솔루션처럼 보일 수도 있지만, 사이트의 사용자 경험을 향상시키고 사용자의 불만을 예방하는 데 도움이 됩니다.
(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;
});
할수있습니다
$('.myCheckbox').attr('checked',true) //Standards compliant
또는
$("form #mycheckbox").attr('checked', true)
기동하는 체크 박스의 온클릭이벤트에 커스텀코드가 있는 경우는, 다음의 것을 사용해 주세요.
$("#mycheckbox").click();
Atribute를 완전히 삭제하는 것으로, 오프할 수 있습니다.
$('.myCheckbox').removeAttr('checked')
다음과 같이 모든 체크박스를 켤 수 있습니다.
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
또한 $.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()와 같은 더 고유한 이름을 지정할 수도 있습니다.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
마지막 체크박스에 대한 클릭이벤트가 시작되고 다른 체크박스에 대한 클릭이벤트가 실행되지 않습니다.따라서 실행할 체크박스의 온클릭이벤트에 커스텀코드가 있는 경우는 마지막 체크박스를 사용합니다.
체크박스를 켜려면
$('.myCheckbox').attr('checked',true);
또는
$('.myCheckbox').attr('checked','checked');
체크박스를 끄려면 항상 false로 설정해야 합니다.
$('.myCheckbox').attr('checked',false);
네가 한다면.
$('.myCheckbox').removeAttr('checked')
Atribute가 모두 삭제되므로 폼을 리셋할 수 없습니다.
BAD DEMO 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');
}
});
지정된 서브스트링 "ckbItem"을 포함하는 값을 가진 지정된 속성을 가진 요소가 선택됩니다.
$('input[name *= ckbItem]').prop('checked', true);
이름 속성에 ckbItem이 포함된 모든 요소가 선택됩니다.
만약 질문이...
BY VALUE 체크박스를 켜려면 어떻게 해야 하나요?
일반적인 체크 박스 세트에서는, 모든 입력 태그의 이름이 같고, 속성에 의해서 다릅니다.즉, 세트의 각 입력에 ID는 없습니다.
Xian의 답변은 다음 코드 행을 사용하여 보다 구체적인 셀렉터로 확장할 수 있습니다.
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
해결책을 놓치고 있어요.항상 사용:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
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;
});
});
업데이트: 다음은 attr를 대체하는 새로운 Jquery 1.6+ prop 메서드를 사용한 동일한 코드 블록입니다.
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;
});
});
이것을 시험해 보세요.
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
하면 됩니다.elementObject합니다.jQuery는 다음과 같습니다.
$(objectElement).attr('checked');
모든 jQuery 버전에서 오류 없이 사용할 수 있습니다.
업데이트: Jquery 1.6+에는 attr를 대체하는 새로운 프로펠러 메서드가 있습니다.다음은 예를 제시하겠습니다.
$(objectElement).prop('checked');
애플리케이션 개발을 위해 PhoneGap을 사용하고 있으며 버튼에 즉시 표시할 값이 있는 경우 이 작업을 잊지 마십시오.
$('span.ui-[controlname]',$('[id]')).text("the value");
스팬이 없으면 어떤 작업을 해도 인터페이스가 업데이트되지 않습니다.
여기 여러 개의 체크박스를 켜는 방법에 대한 코드와 데모가 있습니다.
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;
}
}
});
또 다른 가능한 해결책:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
@live free75가 말했듯이:
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();
모바일을 사용하여 인터페이스를 업데이트하고 체크박스를 꺼짐으로 표시하려면 다음 명령을 사용합니다.
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
jQuery 1.6+의 경우
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
jQuery 1.5.x 이하의 경우
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
체크하기 위해서
$('.myCheckbox').removeAttr('checked');
선택 및 선택 취소 방법
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
jQuery 문서에 기재되어 있듯이 Internet Explorer 9보다 이전 Internet Explorer의 메모리 누전에 주의해 주십시오.
버전 9 이전의 Internet Explorer에서는 DOM 요소가 문서에서 삭제되기 전에 속성을 삭제하지 않으면(.removeProp()를 사용하여) .prop()를 사용하여 DOM 요소 속성을 단순한 원시 값(숫자, 문자열 또는 부울) 이외의 값으로 설정하면 메모리 누수가 발생할 수 있습니다.메모리 누전 없이 DOM 오브젝트 값을 안전하게 설정하려면 .data()를 사용합니다.
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
이것이 아마도 가장 짧고 쉬운 해결책일 것입니다.
$(".myCheckBox")[0].checked = true;
또는
$(".myCheckBox")[0].checked = false;
더 짧은 것은 다음과 같습니다.
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
플레인 JavaScript는 매우 단순하고 오버헤드가 훨씬 적습니다.
var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}
다음을 사용하여 작업을 수행할 수 없습니다.
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
true와 false 모두 체크박스를 켭니다.나에게 효과가 있었던 것은, 다음과 같습니다.
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
다음과 같은 체크박스를 켜면
$('.className').attr('checked', 'checked')
충분하지 않을 수도 있어요.아래 함수도 호출해야 합니다.
$('.className').prop('checked', 'true')
특히 체크박스를 끄면 Atribute가 켜집니다.
다음은 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");
}
JavaScript에서는
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
언급URL : https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery
'source' 카테고리의 다른 글
| convert_tz가 null을 반환합니다. (0) | 2023.01.15 |
|---|---|
| Python 스크립트를 프로파일하려면 어떻게 해야 하나요? (0) | 2023.01.15 |
| Mysql은 sudo와 함께 작동하지만 그렇지 않습니다.(ubuntu 16.04, mysql 5.7.12-0ubuntu1).1) (0) | 2023.01.15 |
| 이벤트 루프 컨텍스트 내의 마이크로태스크와 매크로태스크의 차이 (0) | 2023.01.15 |
| Vee가 v3 ValidationObserver가 v-for를 사용하여 추가된 동적 유효성 검사 제공자와 함께 작동하지 않음을 확인함 (0) | 2023.01.15 |