그렇다면 사용자가 하나의 확인란 만 선택하도록 허용하려면 어떻게해야합니까?
라디오 버튼이 “이상적”이라는 것을 알고 있지만 제 목적으로는 그렇지 않습니다.
사용자가 두 옵션 중 하나 또는 둘 중 하나만 선택해야하는 필드가 있습니다. 문제는 내 사용자가 옵션 선택을 취소 할 수 있어야한다는 것입니다. 여기에서 그룹을 선택하면 옵션을 선택해야하므로 라디오 버튼이 실패합니다.
나는 php를 통해 정보의 유효성을 검사 할 것이지만, 그들이 그것을 제공하고 싶다면 여전히 사용자를 하나의 답변으로 제한하고 싶습니다.
답변
이 스 니펫은 다음을 수행합니다.
- 라디오 버튼과 같은 그룹화 허용
- 라디오처럼 행동
- 모두 선택 취소 허용
// the selector will match all input controls of type :checkbox
// and attach a click event handler
$("input:checkbox").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
if ($box.is(":checked")) {
// the name of the box is retrieved using the .attr() method
// as it is assumed and expected to be immutable
var group = "input:checkbox[name='" + $box.attr("name") + "']";
// the checked state of the group/box on the other hand will change
// and the current value is retrieved using .prop() method
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<h3>Fruits</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango</label>
</div>
<div>
<h3>Animals</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah</label>
</div>답변
change()확인란의 상태가 변경 될 때 이벤트가 발생하도록 핸들러 를 바인딩하고 싶습니다 . 그런 다음 핸들러를 트리거 한 체크 박스를 제외한 모든 체크 박스를 선택 취소합니다.
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
});여기 바이올린이 있습니다
그룹화의 경우 “그룹”확인란이 모두 형제 인 경우 :
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>다음과 같이 할 수 있습니다.
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').prop('checked', false);
});여기 또 다른 바이올린이 있습니다
체크 박스가 다음과 같은 다른 속성으로 그룹화 된 경우 name:
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />다음과 같이 할 수 있습니다.
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});여기 또 다른 바이올린이 있습니다
답변
라디오 버튼이 이상적입니다. 기본적으로 선택되는 세 번째 “둘 다 아님”옵션 만 있으면됩니다.
답변
순수한 JS를 기반으로 한 이에 대한 몇 가지 답변이 이미 있지만 그중 어느 것도 내가 원하는만큼 간결하지 않습니다.
다음은 이름 태그 (라디오 버튼과 마찬가지로)와 몇 줄의 자바 스크립트 사용을 기반으로 한 솔루션입니다.
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('check')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
}<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">답변
$("#myform input:checkbox").change(function() {
$("#myform input:checkbox").attr("checked", false);
$(this).attr("checked", true);
});이것은 양식의 여러 확인란에 대해 작동합니다. 그룹에 속하지 않는 다른 사람이있는 경우 선택기를 해당 입력으로 설정합니다.
답변
내가 선호하는 간단한 HTML 및 JavaScript 솔루션은 다음과 같습니다.
// js 함수를 사용하여 한 번에 하나의 주중 확인란 만 확인할 수 있습니다.
function checkOnlyOne(b){
var x = document.getElementsByClassName('daychecks');
var i;
for (i = 0; i < x.length; i++) {
if(x[i].value != b) x[i].checked = false;
}
}
Day of the week:
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Monday" />Mon
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Tuesday" />Tue
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Wednesday" />Wed
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Thursday" />Thu
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Friday" />Fri
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Saturday" />Sat
<input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Sunday" />Sun <br /><br />답변
이 코드가 도움이되기를 바랍니다.
$(document).ready(function(){
$('.slectOne').on('change', function() {
$('.slectOne').not(this).prop('checked', false);
$('#result').html($(this).data( "id" ));
if($(this).is(":checked"))
$('#result').html($(this).data( "id" ));
else
$('#result').html('Empty...!');
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" class="slectOne" data-id="1 selected"/>
<input type="checkbox" class="slectOne" data-id="2 selected"/>
<input type="checkbox" class="slectOne" data-id="3 selected"/>
<input type="checkbox" class="slectOne" data-id="4 selected"/>
<input type="checkbox" class="slectOne" data-id="5 selected"/>
<input type="checkbox" class="slectOne" data-id="6 selected"/>
<input type="checkbox" class="slectOne" data-id="7 selected"/>
<input type="checkbox" class="slectOne" data-id="8 selected"/>
<input type="checkbox" class="slectOne" data-id="9 selected"/>
<input type="checkbox" class="slectOne" data-id="10 selected"/>
<span id="result"></span>
</body>
</html>작업 링크 여기를 클릭하십시오