jQuery를 사용하여 확인란을 "선택"으로 설정하시겠습니까?
-
06-07-2019 - |
문제
나는 체크를 위해 이런 일을 하고 싶다. checkbox
사용하여 jQuery:
$(".myCheckBox").checked(true);
또는
$(".myCheckBox").selected(true);
그런 것이 존재하나요?
해결책
jQuery 1.6+
새로운 것을 사용하십시오 .prop()
방법:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
jQuery 1.5.x 이하
그만큼 .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()
선적 서류 비치.
jQuery의 모든 버전
하나의 요소만으로 작업하는 경우 언제든지 수정할 수 있습니다. HTMLInputElement
'에스 .checked
재산:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
사용의 이점 .prop()
그리고 .attr()
이 대신 방법은 모든 일치하는 요소에서 작동한다는 것입니다.
다른 팁
사용:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
확인란이 확인되었는지 확인하려면 다음과 같습니다.
$('.myCheckbox').is(':checked');
이것은 교차 플랫폼 표준이므로 jQuery를 사용하여 확인란을 확인하고 선택 해제하는 올바른 방법입니다. ~ 할 것이다 양식 reposts를 허용합니다.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
이렇게하면 체크 박스를 선택하고 확인하지 않기 위해 JavaScript 표준을 사용하므로 Checkbox 요소의 "확인 된"속성을 올바르게 구현하는 모든 브라우저 가이 코드를 완벽하게 실행합니다. 이것 ~해야 한다 모든 주요 브라우저이지만 Internet Explorer 9 이전에는 테스트 할 수 없습니다.
문제 (jQuery 1.6) :
사용자가 확인란을 클릭하면 해당 확인란이 "확인 된"속성 변경에 대한 응답을 중지합니다.
다음은 누군가가있는 후에 작업을 수행하지 못하는 Checkbox 속성의 예입니다. 클릭 확인란 (Chrome에서 발생합니다).
해결책:
JavaScript의 "Checked"속성을 사용하여 돔 요소, 우리는 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)
발사하려는 확인란의 OnClick 이벤트에 사용자 정의 코드가있는 경우 대신이 코드를 사용하십시오.
$("#mycheckbox").click();
속성을 완전히 제거하여 선택 취소 할 수 있습니다.
$('.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();
마지막은 확인란의 클릭 이벤트를 시작하지만 다른 하나는 그렇지 않습니다. 따라서 해고하려는 확인란의 OnClick 이벤트에 사용자 정의 코드가있는 경우 마지막 코드를 사용하십시오.
확인란을 확인하려면 사용해야합니다
$('.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 크롬에서 작동합니다.
두 데모 모두 사용됩니다
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
이는 주어진 하위 문자열 "ckbItem"을 포함하는 값을 가진 지정된 속성을 가진 요소를 선택합니다.
$('input[name *= ckbItem]').prop('checked', true);
name 속성에 ckbItem을 포함하는 모든 요소가 선택됩니다.
질문이 ...
체크 박스 세트를 어떻게 확인합니까? 가치로?
일반적인 확인란 세트에서 모든 입력 태그는 동일한 이름을 가지고 있음을 기억하십시오. 속성에 따라 다릅니다 value
: 세트의 각 입력에 대한 ID는 없습니다.
Xian의 답변은 a로 확장 될 수 있습니다 보다 구체적인 선택기, 다음 코드 줄을 사용하여 :
$("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>
이 시도:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
다음은 버튼으로 확인하고 확인하지 않은 코드입니다.
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 메소드를 사용하여 동일한 코드 블록입니다.
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;
});
});
우리는 사용할 수 있습니다 elementObject
속성을 확인하기위한 jQuery와 함께 :
$(objectElement).attr('checked');
오류없이 모든 jQuery 버전에이를 사용할 수 있습니다.
업데이트 : jQuery 1.6+에는 attr을 대체하는 새로운 소품 방법이 있습니다.
$(objectElement).prop('checked');
사용중인 경우 전화기 응용 프로그램 개발을 수행하면 즉시 표시하려는 버튼에 값이 있습니다.
$('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);
}
모바일을 사용하고 인터페이스가 확인되지 않은 것으로 업데이트하고 표시하려면 다음을 사용하십시오.
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
인터넷 익스플로러에서 메모리 누출에주의하십시오. 인터넷 익스플로러 9,로 jQuery 문서 상태:
버전 9 이전의 인터넷 익스플로러에서 .prop ()을 사용하여 DOM 요소 속성을 간단한 원시 값 (숫자, 문자열 또는 부울) 이외의 다른 것으로 설정하여 속성을 제거하지 않으면 메모리 누출을 유발할 수 있습니다 (.removeProp (사용 사용). )) DOM 요소가 문서에서 제거되기 전에. 메모리 누출이없는 DOM 객체에서 값을 안전하게 설정하려면 .Data ()를 사용하십시오.
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);
@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();
$('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;
여기에 있습니다 ㅏ jsfiddle 또한.
일반 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')
특히 확인란 확인 속성을 제거했을 때.
다음은 완전한 대답입니다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");
}