Develop Reference

Doing mutual exclusive checkbox of two buttons with siblings()

I am trying to get two buttons groups with checkboxes mutually exclusive.
Here's my current result on this JS Fiddle
As you can see, there are four divs (with id="UserVsComputer", id="User1VsUser2", id="PlayableHits" and id="button-new-game").
I want the two first <div> ( UserVsComputer and User1VsUser2 ) to be mutually exclusive when we click on the checkbox of concerning <input> (i.e corresponding to the right <div>).
In JavaScript part, I did:
// Select the clicked checkbox for game type
$('input.game').on('click',function(){
setGameType();
});
function setGameType() {
// Get state of the first clicked element
var element = $('#UserVsComputer input.game');
var checkBoxState = element.prop('checked');
// Set !checkBoxState for the sibling checkbox, i.e the other
element.siblings().find('input.game').prop('checked',!checkBoxState);
updateGameType();
}
function updateGameType() {
// Set type of game
if ($('#UserVsComputer input').prop('checked'))
gameType = 'UserVsComputer';
else
gameType = 'User1VsUser2';
}
I don't want the <div id="PlayableHits" class="checkbox"> to be concerned by this mutual exclusion on two first checkboxes.
For example, below a capture showing that I can set the two first checkbox to true without making them exclusive:
What might be wrong here?

Try the following - it uses the target of the click event to ascertain which checkbox was checked:
// Select the clicked checkbox for game type
$('input.game').on('click',function(e){
setGameType(e.target);
});
function setGameType(cb) {
var container = $(cb).parent().parent();
var checkBox = $(cb);
var checkBoxState = checkBox.prop('checked');
// Set !checkBoxState for the sibling checkbox, i.e the other
container.siblings().find('input.game').prop('checked', !checkBoxState);
updateGameType();
}
function updateGameType() {
// Set type of game
if ($('#UserVsComputer input').prop('checked')) {
gameType = 'UserVsComputer';
} else {
gameType = 'User1VsUser2';
}
}
There are other bits which could use some attention (the hardcoded .parent().parent() isn't pretty but works in this case..

SAPUI5 TreeTable: User Interaction set to "true" when event fired by code

When selecting a row in my SAPUI5 tree table I have to make sure that
all existing selections are removed
check if selected row has children and if so, select the item and all its children
To do that I use a function that gets called on the rowSelectionChange-Event of my table:
onRowSelectionChange: function(oEvent) {
if (oEvent.getParameters().userInteraction)
var oTable = oEvent.getSource();
var oObject = oEvent.getParameters().rowContext.getObject();
var iIndex = oEvent.getParameters().rowIndex;
// Check if row was selected or deselected
if (oTable.isIndexSelected(iIndex)) {
// Deselect other items
oTable.clearSelection();
// Select row again
oTable.addSelectionInterval(iIndex, iIndex);
// Check if object has children
if (oObject.content) {
//Select child rows here
} else {
// Do stuff
}
} else {
// Do stuff
}
}
}
As you can see the first thing I do is to check if the selection change's origin was an explicit user interaction, because, of course, clearing the selection and then adding the selection for the child rows will call the function again.
My problem is now, that when clearSelection() calls my function, the userInteraction-parameter is again set to true, despite not being an explicit user interaction. Am I missing something here?
Thank you!

Multiple conditions on single checkbox

I wanted to have a single checkbox in a form but i need to implement multiple scenarios but not sure if this is possible using a single checkbox or if i need radio buttons . Please advise
box shown and checked: Accepted / yes
(hidden)Box shown and not checked: Declined / no
Box not shown: Not Shown / blank

not sure if this is possible using a single checkbox
box shown and checked: Accepted / yes
(hidden)Box shown and not checked: Declined / no
Box not shown: Not Shown / blank
if the requirements 1/2/3 can be met using a single checkbox .The reason i ask is a single checkbox can hold only one value and if there is a way i can alter the value in Jquery dynamically still satisfying all the requirements.
Yes, it is possible. You can create an object having properties set to selectors :checked, :not(:checked, :hidden), :hidden; with corresponding values set to yes, no, blank. Set variable at change event handler using for..in loop, .is()
var obj = {
":checked": "yes",
":not(:checked, :hidden)": "no",
":hidden": "blank"
};
var curr;
$(":checkbox").change(function() {
for (var prop in obj) {
if ($(this).is(prop)) {
curr = obj[prop]; break;
}
}
// do stuff with `curr`
console.log(curr);
});
// check `:hidden`
$(":checkbox").prop("hidden", true)
.change() // `curr` should log `blank`
.prop("hidden", false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="checkbox" />

I have created one sample onchange function where you can handle mutiple events
codepen URL for reference:
http://codepen.io/nagasai/pen/xOGNYW
<input type="checkbox" id="checkTest" onchange="myFunction()">
<input type="text" id="myText" value="checked">
#myText
{
display:none;
}
function myFunction() {
if (document.getElementById("checkTest").checked) {
document.getElementById("myText").style.display = "block";
} else {
document.getElementById("myText").style.display = "none";
}
}

Changing aria-label based on the binding of css style

I have a checkbox that i have an aria-label for but i am not sure of how to change this aria-label text to reflect whether the checkbox is checked or not for the user. Is it possible to control the aria-label text in the same function for rendering the css?
Function for checking and unchecking box:
checkbox = ko.pureComputed(function () {
var checked = checked(),
uncheck = uncheck(),
checkedIcon = 'icon_check',
uncheckedIcon = 'no_check',
if (checked) {
//Can i add in here what the aria-label text should be?
return checkedIcon;
}
if (uncheck) {
return uncheckedIcon;
}
});

You could do something like this if you would like to change the attribute based on check-box value.
HTML:
<input type="checkbox" data-bind="checked:Mycheckbox,attr:{'aria-label':MyAriaLabel}" >
VM:
$(function () {
var MainViewModel = function () {
var self = this;
self.MyAriaLabel = ko.observable('aria-lebel');
self.Mycheckbox = ko.observable();
self.Mycheckbox.subscribe(function(newVal){
self.MyAriaLabel(newVal?'Something' : 'Something else');
})
}
ko.applyBindings(new MainViewModel());
})
Example : http://jsfiddle.net/GSvnh/5129/

You could, but it sounds like you're making this more complex than it has to be. Rather than manually setting an aria-label, you can use the native API of the checkbox input type. If your html is an actual checkbox input, like:
<input id="check1" name="field-name" type="checkbox">
then when it's checked off, it should automatically get the "checked" attribute, which screenreaders should be able to pick up on. If that fails, you can use aria-checked to supplement it.
var isChecked = element.getAttribute('checked')
element.setAttribute('aria-checked', isChecked)
If you're not using normal input type="checkbox" markup for whatever reason, you can add role="checkbox" to your markup to help the browser treat it as such.
Bonus: you can even use the native check behavior to handle your css, in some cases, via something like this:
[type="checkbox"] { background-image: url('uncheckedIcon.png'); }
[type="checkbox"]:checked { background-image: url('checkedIcon.png'); }

how to display the div on the basis of check box is checked

I am developing a game in that at the rules n regulation page i have a check box so i want when check box is checked continue button should appear otherwise it should be disappear from the page.
<div id = "bSubmit"><input type="submit" value="continue"></div>
function validate() {
if (document.getElementById('iAgree').checked)
{
bSubmit.display='block';
}
else
{
bSubmit.display='none';
}
}
Please help me out

Well there are points you need to change or add in your code. The one that I came up with is as follows.
You can further improve it by separating the js into another file and wrapping your code in a document.onload function.
<input type="checkbox" id="iAgree"/>
<div id = "bSubmit"><input type="submit" value="continue"></div>
<script>
var bIAgree = document.getElementById('iAgree');
function validate() {
var bSubmit = document.getElementById('bSubmit');
if (bIAgree.checked) {
bSubmit.style.display='block';
} else {
bSubmit.style.display='none';
}
}
// For the first time that the page loads,
// set the state of the div
validate();
// set the state of the div when the checkbox state has changed
bIAgree.onchange = validate;
</script>