Jadi bagaimana bisa aku hanya memungkinkan pengguna untuk memilih hanya satu checkbox?
Saya tahu radio tombol "tempat", tetapi untuk tujuan saya...itu's tidak.
Saya punya bidang di mana pengguna harus memilih salah satu atau dua pilihan, tetapi tidak keduanya. Masalahnya adalah bahwa saya perlu saya pengguna juga dapat memilih pilihan mereka, dan ini adalah di mana tombol radio gagal karena setelah anda pilih grup, anda harus memilih sebuah pilihan.
Aku akan memvalidasi info via php, tapi saya'd masih ingin membatasi pengguna untuk satu jawaban jika mereka ingin memberikan itu.
Potongan ini akan:
// 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>
Anda'd ingin mengikat ubah()
handler sehingga acara akan menyala ketika keadaan centang perubahan. Kemudian, hapus semua centang yang terpisah dari satu yang memicu handler:
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
Adapun pengelompokan, jika anda centang "kelompok" semua saudara:
<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>
Anda bisa lakukan ini:
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').prop('checked', false);
});
Jika anda centang yang dikelompokkan berdasarkan atribut lain, seperti nama
:
<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[]" />
Anda bisa lakukan ini:
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
Sudah ada beberapa jawaban untuk ini berdasarkan JS murni tetapi tidak satupun dari mereka yang cukup ringkas seperti yang saya ingin mereka untuk menjadi.
Berikut adalah solusi yang didasarkan pada menggunakan name tag (sesuai dengan tombol radio) dan beberapa baris javascript.
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);
});
Ini harus bekerja untuk sejumlah kotak centang dalam bentuk. Jika anda memiliki orang lain yang tidak't bagian dari kelompok, mengatur pemilih yang berlaku input.
Berikut ini adalah sederhana HTML dan JavaScript solusi yang saya sukai:
//js fungsi untuk memungkinkan hanya memeriksa satu hari centang pada waktu:
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 />
Mungkin kode ini akan membantu anda.
$(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>
Link bekerja Klik di sini
Bangunan di billyonecan's jawaban, anda dapat menggunakan kode berikut jika anda membutuhkan snippet untuk lebih dari satu kotak (dengan asumsi mereka memiliki nama yang berbeda).
$('input.one').on('change', function() {
var name = $(this).attr('name');
$('input[name='+name+'].one').not(this).prop('checked', false);
});
Contoh Dengan AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('app', []).controller('appc', ['$scope',
function($scope) {
$scope.selected = 'other';
}
]);
</script>
</head>
<body ng-app="app" ng-controller="appc">
<label>SELECTED: {{selected}}</label>
<div>
<input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
<br>
<input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
<br>
<input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('app', []).controller('appc', ['$scope',
function($scope) {
$scope.selected = 'male';
}
]);
</script>
</head>
<body ng-app="app" ng-controller="appc">
<label>SELECTED: {{selected}}</label>
<div>
<input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
<br>
<input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
<br>
<input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
</div>
</body>
</html>
Jika seseorang membutuhkan solusi tanpa javascript eksternal perpustakaan, anda bisa menggunakan contoh ini. Kelompok kotak centang yang memungkinkan 0..1 nilai-nilai. Anda dapat klik pada kotak centang komponen atau berhubungan label teks.
<input id="mygroup1" name="mygroup" type="checkbox" value="1" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup1">Yes</label>
<input id="mygroup0" name="mygroup" type="checkbox" value="0" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup0">No</label>
- - - - - - - -
function toggleRadioCheckbox(sender) {
// RadioCheckbox: 0..1 enabled in a group
if (!sender.checked) return;
var fields = document.getElementsByName(sender.name);
for(var idx=0; idx<fields.length; idx++) {
var field = fields[idx];
if (field.checked && field!=sender)
field.checked=false;
}
}
Sementara JS mungkin adalah cara untuk pergi, bisa bisa dilakukan dengan HTML dan CSS saja.
Di sini anda memiliki palsu tombol radio yang benar-benar label untuk nyata tersembunyi tombol radio. Dengan melakukan itu, anda mendapatkan apa efek yang anda butuhkan.
<style>
#uncheck>input { display: none }
input:checked + label { display: none }
input:not(:checked) + label + label{ display: none }
</style>
<div id='uncheck'>
<input type="radio" name='food' id="box1" />
Pizza
<label for='box1'>◎</label>
<label for='box0'>◉</label>
<input type="radio" name='food' id="box2" />
Ice cream
<label for='box2'>◎</label>
<label for='box0'>◉</label>
<input type="radio" name='food' id="box0" checked />
</div>
Lihat di sini:
Sekarang, yang mengasumsikan bahwa anda perlu non-dipilih label.
Jika anda bersedia untuk menyertakan label, anda secara teknis dapat menghindari pengulangan "hapus centang" label dengan mengubah teks dalam CSS, lihat di sini: https://jsfiddle.net/7tdb6quy/2/
Versi saya: gunakan data atribut dan Vanili JavaScript
<div class="test-checkbox">
Group One: <label>
<input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Eat" />Eat</label>
<label>
<input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Sleep" />Sleep</label>
<label>
<input type="checkbox" data-limit="only-one-in-a-group" name="groupOne" value="Play" />Play</label>
<br />
Group Two: <label>
<input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Fat" />Fat</label>
<label>
<input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Comfort" />Comfort</label>
<label>
<input type="checkbox" data-limit="only-one-in-a-group" name="groupTwo" value="Happy" />Happy</label>
</div>
<script>
let cbxes = document.querySelectorAll('input[type="checkbox"][data-limit="only-one-in-a-group"]');
[...cbxes].forEach((cbx) => {
cbx.addEventListener('change', (e) => {
if (e.target.checked)
uncheckOthers(e.target);
});
});
function uncheckOthers (clicked) {
let name = clicked.getAttribute('name');
// find others in same group, uncheck them
[...cbxes].forEach((other) => {
if (other != clicked && other.getAttribute('name') == name)
other.checked = false;
});
}
</script>
Berbicara dengan dunia roh:
Dan tanpa jQuery, untuk kotak centang struktur seperti ini:
<label>
<input type="checkbox" id="mytrackers_1" name="blubb_1" value="">--- Bitte auswählen ---
</label>
<label>
<input type="checkbox" id="mytrackers_2" name="blubb_2" value="7">Testtracker
</label>
<label>
<input type="checkbox" id="mytrackers_3" name="blubb_3" value="3">Kundenanfrage
</label>
<label>
<input type="checkbox" id="mytrackers_4" name="blubb_4" value="2">Anpassung
</label>
<label>
<input type="checkbox" id="mytrackers_5" name="blubb_5" value="1" checked="checked" >Fehler
</label>
<label>
<input type="checkbox" id="mytrackers_6" name="blubb_6" value="4">Bedienung
</label>
<label>
<input type="checkbox" id="mytrackers_7" name="blubb_7" value="5">Internes
</label>
<label>
<input type="checkbox" id="mytrackers_8" name="blubb_8" value="6">Änderungswunsch
</label>
anda akan melakukannya seperti ini:
/// attach an event handler, now or in the future,
/// for all elements which match childselector,
/// within the child tree of the element maching parentSelector.
function subscribeEvent(parentSelector, eventName, childSelector, eventCallback) {
if (parentSelector == null)
throw new ReferenceError("Parameter parentSelector is NULL");
if (childSelector == null)
throw new ReferenceError("Parameter childSelector is NULL");
// nodeToObserve: the node that will be observed for mutations
var nodeToObserve = parentSelector;
if (typeof (parentSelector) === 'string')
nodeToObserve = document.querySelector(parentSelector);
var eligibleChildren = nodeToObserve.querySelectorAll(childSelector);
for (var i = 0; i < eligibleChildren.length; ++i) {
eligibleChildren[i].addEventListener(eventName, eventCallback, false);
} // Next i
// https://stackoverflow.com/questions/2712136/how-do-i-make-this-loop-all-children-recursively
function allDescendants(node) {
if (node == null)
return;
for (var i = 0; i < node.childNodes.length; i++) {
var child = node.childNodes[i];
allDescendants(child);
} // Next i
// IE 11 Polyfill
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector;
if (node.matches) {
if (node.matches(childSelector)) {
// console.log("match");
node.addEventListener(eventName, eventCallback, false);
} // End if ((<Element>node).matches(childSelector))
// else console.log("no match");
} // End if ((<Element>node).matches)
// else console.log("no matchfunction");
} // End Function allDescendants
// Callback function to execute when mutations are observed
var callback = function (mutationsList, observer) {
for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
var mutation = mutationsList_1[_i];
// console.log("mutation.type", mutation.type);
// console.log("mutation", mutation);
if (mutation.type == 'childList') {
for (var i = 0; i < mutation.addedNodes.length; ++i) {
var thisNode = mutation.addedNodes[i];
allDescendants(thisNode);
} // Next i
} // End if (mutation.type == 'childList')
// else if (mutation.type == 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.');
} // Next mutation
}; // End Function callback
// Options for the observer (which mutations to observe)
var config = { attributes: false, childList: true, subtree: true };
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(nodeToObserve, config);
} // End Function subscribeEvent
function radioCheckbox_onClick()
{
// console.log("click", this);
let box = this;
if (box.checked)
{
let name = box.getAttribute("name");
let pos = name.lastIndexOf("_");
if (pos !== -1) name = name.substr(0, pos);
let group = 'input[type="checkbox"][name^="' + name + '"]';
// console.log(group);
let eles = document.querySelectorAll(group);
// console.log(eles);
for (let j = 0; j < eles.length; ++j)
{
eles[j].checked = false;
}
box.checked = true;
}
else
box.checked = false;
}
// https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group
function radioCheckbox()
{
// on instead of document...
let elements = document.querySelectorAll('input[type="checkbox"]')
for (let i = 0; i < elements.length; ++i)
{
// console.log(elements[i]);
elements[i].addEventListener("click", radioCheckbox_onClick, false);
} // Next i
} // End Function radioCheckbox
function onDomReady()
{
console.log("dom ready");
subscribeEvent(document, "click",
'input[type="checkbox"]',
radioCheckbox_onClick
);
// radioCheckbox();
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", onDomReady, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", onDomReady);
else window.onload = onDomReady;
function onPageLoaded() {
console.log("page loaded");
}
if (window.addEventListener) window.addEventListener("load", onPageLoaded, false);
else if (window.attachEvent) window.attachEvent("onload", onPageLoaded);
else window.onload = onPageLoaded;
//Here is a solution using JQuery
<input type = "checkbox" class="a"/>one
<input type = "checkbox" class="a"/>two
<input type = "checkbox" class="a"/>three
<script>
$('.a').on('change', function() {
$('.a').not(this).prop('checked',false);
});
</script>