HTML checkbox - allow to check only one checkbox - html

I have some checkboxes in each row in my table. Each one checkbox has name='myName' because I want to select only one checkbox in each row. But something I'm missing because I'm able to check all of them:
but I want that result:
what am I missing here ?

The unique name identifier applies to radio buttons:
<input type="radio" />
change your checkboxes to radio and everything should be working

Checkboxes, by design, are meant to be toggled on or off. They are not dependent on other checkboxes, so you can turn as many on and off as you wish.
Radio buttons, however, are designed to only allow one element of a group to be selected at any time.
References:
Checkboxes: MDN Link
Radio Buttons: MDN Link

$(function () {
$('input[type=checkbox]').click(function () {
var chks = document.getElementById('<%= chkRoleInTransaction.ClientID %>').getElementsByTagName('INPUT');
for (i = 0; i < chks.length; i++) {
chks[i].checked = false;
}
if (chks.length > 1)
$(this)[0].checked = true;
});
});

sapSet = mbo.getThisMboSet()
sapCount = sapSet.count()
saplist = []
if sapCount > 1:
for i in range(sapCount):`enter code here`
defaultCheck = sapSet.getMbo(i)
saplist.append(defaultCheck.getInt("HNADEFACC"))
defCount = saplist.count(1)
if defCount > 1:
errorgroup = " Please Note: you are allowed"
errorkey = " only One Default Account"
if defCount < 1:
errorgroup = " Please enter "
errorkey = " at leat One Default Account"
else:
mbo.setValue("HNADEFACC",1,MboConstants.NOACCESSCHECK)

$('#OvernightOnshore').click(function () {
if ($('#OvernightOnshore').prop("checked") == true) {
if ($('#OvernightOffshore').prop("checked") == true) {
$('#OvernightOffshore').attr('checked', false)
}
}
})
$('#OvernightOffshore').click(function () {
if ($('#OvernightOffshore').prop("checked") == true) {
if ($('#OvernightOnshore').prop("checked") == true) {
$('#OvernightOnshore').attr('checked', false);
}
}
})
This above code snippet will allow you to use checkboxes over radio buttons, but have the same functionality of radio buttons where you can only have one selected.

Related

HTML - Hiding objects based on class

I have a function that hides a div with the corresponding ID based on a radio button change, however, I would like to hide multiple items at once and as ID is unique I am not able to just hide them all. How would I set up a class that I can hide and how would I adjust this code below to make that work?
Any help greatly appreciated
function onChangePackage() {
const nodes = document.getElementsByClassName("baseClass");
var selectedValue;
// Get selected radio
for (var i = 0, length = nodes.length; i < length; i++) {
if (nodes[i].checked) {
selectedValue = nodes[i].value;
break;
}
}
// Showing all nodes first
const nodePostFix = ['A','B','C'];
nodePostFix.forEach( node => {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden" + selectedValue)) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
});
};
You can use data attributes for this purpose together with the attribute selectors. So you need just to add the data-hidden-for attributes to the required nodes and access them using document.querySelector() or document.querySelectorAll()
First give all the elements a base class name baseClass. You could just give them a class name like hidden and then in your code you could do something like below:
const elementsToHide = document.getElementsByClassName("baseClass");
for (var i = 0; i < elementsToHide.length; i++) {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden")) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
}
And on the click event of the radio button you could add this class I mentioned above to whichever ones you want to hide:
element.classList.add("hidden");
or
element.classList.remove("hidden");

Button hide and show reset

Hello I have a question I want to reset button if the fields are empty, the reset is not displayed if a value is entered, the reset is displayed
Reset
for jquery ill recomand this
$( "input" ).change(function() {
var val = $(this).val();
if(val == ""){
$("#yourresetbutton").hide();
}else{
$("#yourresetbutton").show();
}
});
I'm not sure what you mean by this but I take it you want a button to appear only if a textbox if left blank. If so you this is some code you can use:
<input id='textbox' type='text'></input>
<button id='resetButton'></button>
setInterval(checkText, 10)
function checkText() {
if(document.getElementById('textbox').value == '') {
document.getElementById('resetButton').visibility = 'visible';
}
else() {
document.getElementById('resetButton').visibility = 'hidden';
}
}

Use HTML5 (datalist) autocomplete with 'contains' approach, not just 'starts with'

(I can't find it, but then again I don't really know how to search for it.)
I want to use <input list=xxx> and <datalist id=xxx> to get autocompletion, BUT I want the browser to match all options by 'contains' approach, instead of 'starts with', which seems to be standard. Is there a way?
If not simply, is there a way to force-show suggestions that I want to show, not those that the browser matched? Let's say I'm typing "foo" and I want to show options "bar" and "baz". Can I force those upon the user? If I just fill the datalist with those (with JS), the browser will still do its 'starts with' check, and filter them out.
I want ultimate control over HOW the datalist options show. NOT over its UI, flexibility, accessibility etc, so I don't want to completely remake it. Don't even suggest a jQuery plugin.
If I can ultimate-control form element validation, why not autocompletion, right?
edit: I see now that Firefox does use the 'contains' approach... That's not even a standard?? Any way to force this? Could I change Firefox's way?
edit: I made this to illustrate what I'd like: http://jsfiddle.net/rudiedirkx/r3jbfpxw/
HTMLWG's specs on [list]
W3's specs on datalist
DavidWalsh example
HONGKIAT's summary on behaviors..?
'contains' approach
Maybe this is what you are looking for (part 1 of your question).
It goes with the limitation of "starts with" and changes when a selection is made.
'use strict';
function updateList(that) {
if (!that) {
return;
}
var lastValue = that.lastValue,
value = that.value,
array = [],
pos = value.indexOf('|'),
start = that.selectionStart,
end = that.selectionEnd,
options;
if (that.options) {
options = that.options;
} else {
options = Object.keys(that.list.options).map(function (option) {
return that.list.options[option].value;
});
that.options = options;
}
if (lastValue !== value) {
that.list.innerHTML = options.filter(function (a) {
return ~a.toLowerCase().indexOf(value.toLowerCase());
}).map(function (a) {
return '<option value="' + value + '|' + a + '">' + a + '</option>';
}).join();
updateInput(that);
that.lastValue = value;
}
}
function updateInput(that) {
if (!that) {
return;
}
var value = that.value,
pos = value.indexOf('|'),
start = that.selectionStart,
end = that.selectionEnd;
if (~pos) {
value = value.slice(pos + 1);
}
that.value = value;
that.setSelectionRange(start, end);
}
document.getElementsByTagName('input').browser.addEventListener('keyup', function (e) {
updateList(this);
});
document.getElementsByTagName('input').browser.addEventListener('input', function (e) {
updateInput(this);
});
<input list="browsers" name="browser" id="browser" onkeyup="updateList();" oninput="updateInput();">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Edit
A different approach of displaying the search content, to make clear, what happens. This works in Chrome as well. Inspired by Show datalist labels but submit the actual value
'use strict';
var datalist = {
r: ['ralph', 'ronny', 'rudie'],
ru: ['rudie', 'rutte', 'rudiedirkx'],
rud: ['rudie', 'rudiedirkx'],
rudi: ['rudie'],
rudo: ['rudolf'],
foo: [
{ value: 42, text: 'The answer' },
{ value: 1337, text: 'Elite' },
{ value: 69, text: 'Dirty' },
{ value: 3.14, text: 'Pi' }
]
},
SEPARATOR = ' > ';
function updateList(that) {
var lastValue = that.lastValue,
value = that.value,
array,
key,
pos = value.indexOf('|'),
start = that.selectionStart,
end = that.selectionEnd;
if (lastValue !== value) {
if (value !== '') {
if (value in datalist) {
key = value;
} else {
Object.keys(datalist).some(function (a) {
return ~a.toLowerCase().indexOf(value.toLowerCase()) && (key = a);
});
}
}
that.list.innerHTML = key ? datalist[key].map(function (a) {
return '<option data-value="' + (a.value || a) + '">' + value + (value === key ? '' : SEPARATOR + key) + SEPARATOR + (a.text || a) + '</option>';
}).join() : '';
updateInput(that);
that.lastValue = value;
}
}
function updateInput(that) {
var value = that.value,
pos = value.lastIndexOf(SEPARATOR),
start = that.selectionStart,
end = that.selectionEnd;
if (~pos) {
value = value.slice(pos + SEPARATOR.length);
}
Object.keys(that.list.options).some(function (option) {
var o = that.list.options[option],
p = o.text.lastIndexOf(SEPARATOR);
if (o.text.slice(p + SEPARATOR.length) === value) {
value = o.getAttribute('data-value');
return true;
}
});
that.value = value;
that.setSelectionRange(start, end);
}
document.getElementsByTagName('input').xx.addEventListener('keyup', function (e) {
updateList(this);
});
document.getElementsByTagName('input').xx.addEventListener('input', function (e) {
updateInput(this);
});
<input list="xxx" name="xx" id="xx">
<datalist id="xxx" type="text"></datalist>
yet this thread is posted about 2 years ago. but if you are reading this thread, you maybe need to check a newer version of your browser:
Current specification: https://html.spec.whatwg.org/multipage/forms.html#the-list-attribute
User agents are encouraged to filter the suggestions represented by
the suggestions source element when the number of suggestions is
large, including only the most relevant ones (e.g. based on the user's
input so far). No precise threshold is defined, but capping the list
at four to seven values is reasonable. If filtering based on the
user's input, user agents should use substring matching against both
the suggestions' label and value.
And when this post written, behavior of Firefox (51) and Chrome (56) had already been changed to match the specification.
which means what op want should just work now.
this fiddle here has cracked what you are asking for
But I am not sure how to make it work without this dependency as the UI looks bit odd and out of place when used along with Bootstrap.
elem.autocomplete({
source: list.children().map(function() {
return $(this).text();
}).get()
I found this question because I wanted "starts with" behavior, and now all the browsers seem to implement "contains". So I implemented this function, which on Firefox (and probably others), if called from input event handler (and optionally, from focusin event handler) provides "starts with" behavior.
let wrdlimit = prefix =>
{ let elm = mydatalist.firstElementChild;
while( elm )
{ if( elm.value.startsWith( prefix ))
{ elm.removeAttribute('disabled');
} else
{ elm.setAttribute('disabled', true );
}
elm = elm.nextElementSibling;
}
}

HTML 5 make Checkbox required

I have multiple checkbox on my form. I need to make user to select atleast one checkbox or else the form will not submit. I tried required attribute but it checks if user has checked all check boxes.
How to do this?
One solution is to add required attributes to all the checkboxes, and when at least one of these checkboxes is checked, remove the required attributes for all the checkboxes using jQuery.
var requiredCheckboxes = $(':checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
}
else {
requiredCheckboxes.attr('required', 'required');
}
});
DEMO
You can use Javascript that just loops through your html checkboxes and sets the Variable issomethingchecked to TRUE if at least one of them is cheched .
demo http://jsfiddle.net/updpxrfj/2/
var checkboxElements = document.getElementsByTagName("input");
var issomethingchecked = false;
for(var i = 0; i < checkboxElements.length; i++) {
if(checkboxElements[i].type.toLowerCase() == 'checkbox') {
if (checkboxElements[i].checked == true) {
issomethingchecked = true;
}
}
if (issomethingchecked === true) {
// Continue with submiting the form
console.log(issomethingchecked);
}
}

show and hiding order list

String +
if user click the + sign i want to show some oder list
then String -
If the user click the - sign i want to hide order list
How to acheive this with javascript , not using ajax , jquery
You will have to create an id for the ordered list, e.g.
<ol id="superId">
</ol>
then on javascript
function displayOL(enabled) {
if (enabled) {
document.getElementById("superId").style.display = "none";
document.getElementById("minus").style.display = "block";
document.getElementById("plus").style.display = "none";
} else {
document.getElementById("superId").style.display = "block"
document.getElementById("minus").style.display = "none";
document.getElementById("plus").style.display = "show";
}
}
then on anchor tag
+
-
PS....I just did a rough implementation in no order....
try this and attached it to your any event, i.e. onclick, onmouseover, etc...:
function toggleList(elem){
var theList = document.getElementById(elem);
if(theList.style.display == "none"){
theList.style.display == "block";
}
else{
theList.style.display == "none";
}
}
This method can be used for anything you want to show/hide. Obviously, you can call the function and variable anything you like that makes sense...