라디오 버튼을 클릭하여 선택 해제하는 방법은 무엇입니까?
확인란과 달리 사용자가 라디오 버튼을 클릭 한 후에는 선택을 취소 할 수 없습니다. Javascript를 사용하여 프로그래밍 방식으로 토글 할 수있는 방법이 있습니까? 이것은 jQuery를 사용하지 않는 것이 바람직합니다.
HTML 객체의 속성 checked을 다음 false과 같이 설정할 수 있습니다 .
document.getElementById('desiredInput').checked = false;
추신 : Ctrl선택을 취소하려면 키를 누르고 있습니다.
라디오 버튼은 동일한 name속성을 공유하여 정의 된대로 그룹으로 사용됩니다 . 그런 다음 그중 하나를 클릭하면 현재 선택된 항목이 선택 해제됩니다. 사용자가 자신이 선택한 "실제"선택을 취소 할 수 있도록 "모름"또는 "답변 없음"과 같이 null 선택에 해당하는 라디오 버튼을 포함 할 수 있습니다.
선택하거나 선택 취소 할 수있는 단일 버튼을 원하면 확인란을 사용하십시오.
checked속성을 false 로 설정하여 JavaScript에서 라디오 버튼을 선택 취소 할 수 있습니다 (일반적으로 관련 없음) . 예를 들어
<input type=radio name=foo id=foo value=var>
<input type=button value="Uncheck" onclick=
"document.getElementById('foo').checked = false">
이것은 내 대답입니다 (jQuery로 만들었지 만 선택기에만 해당하고 클래스를 추가 및 제거하므로 순수 JS 선택기 및 순수 JS 추가 속성으로 쉽게 바꿀 수 있음)
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
$(document).on("click", "input[name='radioBtn']", function(){
thisRadio = $(this);
if (thisRadio.hasClass("imChecked")) {
thisRadio.removeClass("imChecked");
thisRadio.prop('checked', false);
} else {
thisRadio.prop('checked', true);
thisRadio.addClass("imChecked");
};
})
플러그인으로 마무리
제한 사항 :
- 양식 요소 필요
- 프로그래밍 방식으로 라디오 버튼을 변경할 때 클릭 이벤트를 트리거해야 함
(function($) {
$.fn.uncheckableRadio = function() {
var $root = this;
$root.each(function() {
var $radio = $(this);
if ($radio.prop('checked')) {
$radio.data('checked', true);
} else {
$radio.data('checked', false);
}
$radio.click(function() {
var $this = $(this);
if ($this.data('checked')) {
$this.prop('checked', false);
$this.data('checked', false);
$this.trigger('change');
} else {
$this.data('checked', true);
$this.closest('form').find('[name="' + $this.prop('name') + '"]').not($this).data('checked', false);
}
});
});
return $root;
};
}(jQuery));
$('[type=radio]').uncheckableRadio();
$('button').click(function() {
$('[value=V2]').prop('checked', true).trigger('change').trigger('click');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<label><input name="myRadio" type="radio" value="V1" /> R1</label>
<label><input name="myRadio" type="radio" value="V2" /> R2</label>
<label><input name="myRadio" type="radio" value="V3" /> R3</label>
<button type="button">Change R2</button>
</form>주로 그룹에서 사용되는 라디오 버튼이므로 getElementsByName( ' ' );스크립트 태그에서 쉽게 잡을 수 있습니다 . 이것은 배열을 반환하고 각 배열 자식에 이벤트 리스너를 배치하고 검사 상태를 설정합니다. 이 샘플을보세요.
var myRadios = document.getElementsByName('subscribe');
var setCheck;
var x = 0;
for(x = 0; x < myRadios.length; x++){
myRadios[x].onclick = function(){
if(setCheck != this){
setCheck = this;
}else{
this.checked = false;
setCheck = null;
}
};
}
이 가이드는 코드가 시각적 데모와 함께 작동하는 방식을 설명합니다.
그것이 내가 온 것입니다.
function uncheck_radio_before_click(radio) {
if(radio.prop('checked'))
radio.one('click', function(){ radio.prop('checked', false); } );
}
$('body').on('mouseup', 'input[type="radio"]', function(){
var radio=$(this);
uncheck_radio_before_click(radio);
})
$('body').on('mouseup', 'label', function(){
var label=$(this);
var radio;
if(label.attr('for'))
radio=$('#'+label.attr('for')).filter('input[type="radio"]');
else
radio=label.children('input[type="radio"]');
if(radio.length)
uncheck_radio_before_click(radio);
})
http://jsfiddle.net/24vft2of/2/
나는 같은 문제가 있었기 때문에 여기에 왔습니다. 옵션을 비워 두면서 사용자에게 옵션을 제시하고 싶었습니다. 백엔드를 복잡하게 만드는 체크 박스를 사용하여 명시 적으로 코딩하는 것이 가능합니다.
사용자가 Control + 클릭을하는 것은 콘솔을 통해 체크를 해제하는 것만큼이나 좋습니다. mousedown을 잡는 것은 초기이고 onclick은 너무 늦습니다.
음, 마침내 여기에 해결책이 있습니다! 이 몇 줄을 페이지에 한 번만 넣으면 페이지의 모든 라디오 버튼에 대해 만들 수 있습니다. 선택기로 조정하여 사용자 지정할 수도 있습니다.
window.onload = function(){
document.querySelectorAll("INPUT[type='radio']").forEach(function(rd){rd.addEventListener("mousedown",
function(){
if (this.checked) {this.onclick=function(){this.checked=false}} else{this.onclick=null}
})})}<input type=radio name=unchecksample> Number One<br>
<input type=radio name=unchecksample> Number Two<br>
<input type=radio name=unchecksample> Number Three<br>
<input type=radio name=unchecksample> Number Four<br>
<input type=radio name=unchecksample> Number Five<br>자바 스크립트 측면에서 질문을 받았지만 jquery의 적응은 사소합니다.이 방법을 사용하면 "null"값을 확인하고 전달할 수 있습니다.
var checked_val = "null";
$(".no_option").on("click", function(){
if($(this).val() == checked_val){
$('input[name=group][value=null]').prop("checked",true);
checked_val = "null";
}else{
checked_val = $(this).val();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="group" class="no_option" value="0">option 0<br>
<input type="radio" name="group" class="no_option" value="1">option 1<br>
<input type="radio" name="group" class="no_option" value="2">option 2<br>
<input type="radio" name="group" class="no_option" value="3">option 3<br>
<input type="radio" name="group" class="no_option" value="4">option 4<br>
<input type="radio" name="group" class="no_option" value="5">option 5<br>
<input type="radio" name="group" class="no_option" value="6">option 6<br>
<input type="radio" name="group" class="no_option" value="null" style="display:none">user3716078의 답변을 확장하여 여러 독립 라디오 버튼 그룹과 이벤트 리스너를 여러 요소에 할당하는 깔끔한 방법을 허용합니다.
window.onload = function() {
var acc_checked=[];
[].slice.call(document.querySelectorAll('.accordion input[type="radio"]')).forEach(function(el,i){
/**
* i represents the integer value of where we are in the loop
* el represents the element in question in the current loop
*/
el.addEventListener('click', function(e){
if(acc_checked[this.name] != this) {
acc_checked[this.name] = this;
} else {
this.checked = false;
acc_checked[this.name] = null;
}
}, false);
});
}
checked라디오 버튼 의 속성을 사용하여 선택을 취소 할 수 있습니다.
이 같은:
<script>
function uncheck()
{
document.getElementById('myRadio').checked = false;
}
function check()
{
document.getElementById('myRadio').checked = true;
}
</script>
<input id="myRadio" type="radio" checked="checked"/>
<button onclick="uncheck();">Uncheck</button>
<button onclick="check();">Check</button>
여기에서 실제로 확인하세요 : http://jsfiddle.net/wgYNa/
전체 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<input name="radio" type="radio" id="myRadio" value="myRadio" checked="checked" onclick="setRadio(this)" />
<label for="myRadio"></label>
<script language="javascript">
function setRadio(obj)
{
obj.checked = false;
}
</script>
</body>
</html>
Here's an example of where it is arguably appropriate to uncheck radio buttons other than by making a new selection. I have a dictionary whose entries can be selected using a variety of indices. Which index to use is selected by means of a set of radio buttons. However, there is also a "random entry" button that the user can use if he or she just wants to browse. Leaving an index in place when the entry has been selected by means of the random entry button would be misleading, so when this button is pressed, I uncheck all of the index selection radio buttons and replace the contents of the index frame with an empty page.
If you use Iclick pluging, it is as simply as you see below.
$('#radio1').iCheck('uncheck');
In the radio button object creation code include these three lines:
obj.check2 = false; // add 'check2', a user-defined object property
obj.onmouseup = function() { this.check2 = this.checked };
obj.onclick = function() { this.checked = !this.check2 };
Unfortunately it does not work in Chrome or Edge, but it does work in FireFox:
$(document)
// uncheck it when clicked
.on("click","input[type='radio']", function(){ $(this).prop("checked",false); })
// re-check it if value is changed to this input
.on("change","input[type='radio']", function(){ $(this).prop("checked",true); });
Full example in pure JavaScript :
<label style='margin-right: 1em;' onmouseup='var temp = this.children[0]; if (temp.checked) { setTimeout(function() { temp.checked = false; }, 0); }'><input type='radio' name='chk_préf_méd_perso' value='valeur'>libellé</label>Old question but people keep coming from Google here and OP asked preferably without jQuery, so here is my shot.
Should works even on IE 9
// iterate using Array method for compatibility
Array.prototype.forEach.call(document.querySelectorAll('[type=radio]'), function(radio) {
radio.addEventListener('click', function(){
var self = this;
// get all elements with same name but itself and mark them unchecked
Array.prototype.filter.call(document.getElementsByName(this.name), function(filterEl) {
return self !== filterEl;
}).forEach(function(otherEl) {
delete otherEl.dataset.check
})
// set state based on previous one
if (this.dataset.hasOwnProperty('check')) {
this.checked = false
delete this.dataset.check
} else {
this.dataset.check = ''
}
}, false)
})<label><input type="radio" name="foo" value="1"/>foo = 1</label><br/>
<label><input type="radio" name="foo" value="2"/>foo = 2</label><br/>
<label><input type="radio" name="foo" value="3"/>foo = 3</label><br/>
<br/>
<label><input type="radio" name="bar" value="1"/>bar = 1</label><br/>
<label><input type="radio" name="bar" value="2"/>bar = 2</label><br/>
<label><input type="radio" name="bar" value="3"/>bar = 3</label><br/>A working bug free update to Shmili Breuer answer.
(function() {
$( "input[type='radio'].revertible" ).click(function() {
var $this = $( this );
// update and remove the previous checked class
var $prevChecked = $('input[name=' + $this.attr('name') + ']:not(:checked).checked');
$prevChecked.removeClass('checked');
if( $this.hasClass("checked") ) {
$this.removeClass("checked");
$this.prop("checked", false);
}
else {
$this.addClass("checked");
}
});
})();
ReferenceURL : https://stackoverflow.com/questions/10876953/how-to-make-a-radio-button-unchecked-by-clicking-it
'programing' 카테고리의 다른 글
| NSURLConnection sendAsynchronousRequest : queue : completionHandler : 연속으로 여러 요청을 생성합니까? (0) | 2021.01.19 |
|---|---|
| 타임 스탬프에서 밀리 초 부분 삭제 (0) | 2021.01.19 |
| HashMaps 및 Null 값? (0) | 2021.01.18 |
| AutoLayout : removeFromSuperview / removeConstraints에서 예외가 발생하고 충돌이 심합니다. (0) | 2021.01.18 |
| PowerShell의 텍스트 파일에 출력 쓰기 (0) | 2021.01.18 |