Develop Reference

Select a checkbox that selects other checkboxes

I'm building out a simple user role management UI that has multiple permissions based on RBAC rules.
So I have lets say a group called users and inside of that group you get "add user", "edit users", "delete users" and "view users".
What I want to do is be able to select the entire "users" group checkbox and it should select the children checkboxes that belong to it, and so on. I have around 20 of these permissions groups.
I have looked around in stack overflow but am unable to find the solution or come up with something that works.
I'm looking for some help with either Javascript or Jquery.
I have included a screenshot to show you guys what I mean.
I don't have any JS code to show because I'm not even sure where to start.
I'm building the HTML view with Blade which is Laravel's templating engine. Here is my HTML so far.
#foreach($permissions as $name => $permission)
<div class="col-sm-3">
<h4>
<label>
<input type="checkbox">
{{ $name }}
</label>
</h4>
#foreach($permission as $item)
<div class="checkbox small">
<label>
<input name="permissions[]" value="{{ $item }}" type="checkbox">
{{ $item }}
</label>
</div>
#endforeach
</div>
#endforeach

Add appropriate classes to your parent elements and to your child elements so your code could be altered like in the below example.
#foreach($permissions as $name => $permission)
<div class="col-sm-3">
<h4>
<label>
<input type="checkbox" class="{{ $name }}">
{{ $name }}
</label>
</h4>
#foreach($permission as $item)
<div class="checkbox small">
<label>
<input name="permissions[]" class="{{ $name }}-child" value="{{ $item }}" type="checkbox">
{{ $item }}
</label>
</div>
#endforeach
</div>
#endforeach
Your HTML will become like this regarding class names.
users<input class="users" type="checkbox" />
<br><br>
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
<input class="users-child" type="checkbox" />
Finally your jQuery part
$(".users").on("click",function(){ // use the same code for user-roles
var parentClassName = $(this).get(0).className;
if($(this).is(":checked")) {
$("."+parentClassName+"-child").each(function(key,value){
if($(value).get(0).checked==false) {
$(value).get(0).checked = true;
}
});
} else {
$("."+parentClassName+"-child").each(function(key,value){
$(value).get(0).checked = false;
});
}
});
A small example of the above you can check in jsFiddle

try code:
$(function(){
$(document).on('click','.col-sm-3 > h4 > label > input',function(){
var tag = $(this).prop('checked');
$(this).parents('.col-sm-3').find('.checkbox > label > input').prop('checked',tag);
});
})
if code after render template:
$(document).on('click','.col-sm-3 > h4 > label > input',func)
can replace with
$('.col-sm-3 > h4 > label > input').click(func)

Your code is just fine but to make the answer even smaller I would like you to assign class attribute to your main div and checkbox so out jquery will depend on our own classes/selector instead of bootstrap classes.
<div class="col-sm-3 permission-block">
<h4>
<label>
<input type="checkbox" class="something">
{{ $name }}
</label>
</h4>
and then your can add jQuery something like this.
$(document).ready(function(){
$(".something").on("click", function() {
var checked = $(this).is(":checked");
$(this).parent(".permission-block").children(".checkbox").find("input[type='checkbox']").props("checked", checked);
})
})

jquery radio button each -not working

i am trying to loop through the radio buttons by name with 'each' function..the each function is not working and it is applying the logic only once and it is not looping for the next time..
My use case is, when user selects value from the select dropdown, needs to enable both the radio buttons and if the user deselects the dropdown- needs to disable back..
Here in my case, each function is looping only once and after that it is getting exit from it..Need help in figuring disable/enable based on dropdown selection..
html code:-
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
jquery:
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(){
$("#authPermission").prop('disabled',false);
$("#authPermission").prop('checked',false);
});
}
else{
$("#authPermission").each(function(){
$("#authPermission").prop('disabled',true);
$("#authPermission").prop('checked',false);
});
}
});

You cannot have more than one element with the same ID. So, I would change your code by removing the id attribute and putting a new value for the class attribute, then fetch the object using jquery class selector.
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser authPermission" value="anyUser" name="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser authPermission" value="groupUser" name="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
And jQuery code :
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(elemId, elem){
$(elem).prop('disabled',false);
$(elem).prop('checked',false);
});
}
else{
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
}
});
But, if we take a better look at your code, I do not understand why you want to use "each". You can achieve the same thing without it :
// Following code :
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
// Does the same thing as this one :
$(".authPermission").prop('disabled', true).prop('checked', false);

I refactored your code. Also enables the input field when the appropriate radio is clicked. This sould work:
function updateUI() {
var select = $("#authType");
var value = select.val();
var should_appear = (value.length == 0);
$("input:radio[name='authPermission']").attr('disabled',should_appear);
}
//binding...
$("input:radio").on("click", function() {
var should_display_textbox = !($(this).val() === "groupUser");
console.log(should_display_textbox);
$("input:text[name='authPermissionValue']").attr('disabled', should_display_textbox);
});
$("#authType").change(function(){
updateUI();
});
$(document).ready(function() {
updateUI(); //update also when page load
});

Something like this maybe?
$("#authType").change(function(){
var disabled = !$(this).val() ? true : false;
$("input:radio[name='authPermission']").each(function(){
$(this).prop('disabled', disabled );
$(this).prop('checked',false);
});
});

hiding field in a form when a value is selected

I'm trying to get the following function working but it doesn't and I can't figure out why
<script type="text/javascript">
function hideLevel() {
if if isNaN($('#id_course')) {
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
}
$(document).ready(hideLevel);
$('#id_course').change(hideLevel);
</script>
I'm just trying to hide form fields when a value is selected. I mean, when somebody select a value which will be a number, some fields whill have to disappear.
Here is the html code of the form :
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Cours</label>
<div class="controls">
<select id="id_course" name="course">
<option value="" selected="selected">---------</option>
<option value="nl">Néerlandais</option>
<option value="fr">Français</option>
<option value="01">Anglais</option>
<option value="02">Allemand</option>
<option value="03">Latin</option>
</select><br>
</div>
</div>
<div class="control-group">
<label class="control-label">Niveau</label>
<div class="controls">
<ul id="id_level">
<li>
<label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label>
</li>
<li>
<label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label>
</li>
<li>
<label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label>
</li></ul><br>
</div>
</div>
<div class="form-actions">
<br><br>
<div class="col-md-6 col-md-offset-2">
<input type="submit" value="Publier" /><br><br><br>
</div>
</div>
</form>
I'm learning Jquery but in this simple script, I just can't see where is the problem :(
Here is the jsfiddle : http://jsfiddle.net/dvryqvLz/1/
----
EDIT
----
I realize now that the problem is the isNaN function and I didn't explain why I want to use it, please excuse me for that.
I have two sort of course and based on the course, I want to make some field disappear. My idea was to make a distinction between number and string. One category will have values as string and the other as number. The function must just distinct whether the value is a number or not and if it is, fields must disappear.
Anyway, thank you for your answers :)

You miss parentheses () in if condition :
if !isNaN($('#id_course')) {
Should be :
if ( !isNaN($('#id_course')) ) {
And also you have to use .val() to get the value of selected element in condition :
if ( !isNaN( $('#id_course').val() ) ) {
You can use :
$(function(){ //Ready function
hideLevel();
$('body').on('change', '#id_course', function(){
hideLevel();
});
});
Instead of :
$(document).ready(hideLevel);
$('#id_course').change(hideLevel);
NOTE : in example bellow you can see the else clause added because when you select another element with number value you have to show the fields again.
Hope this helps.
function hideLevel() {
if ( isNaN($('#id_course').val()) || $('#id_course').val() == "") {
$('#id_level').show();
$('#level').show();
$('#id_level').parents('.control-group').show();
}else{
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
}
$(function(){ //Ready function
hideLevel();
$('#id_course').on('change', function(){
hideLevel();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Cours</label>
<div class="controls">
<select id="id_course" name="course">
<option value="" selected="selected">---------</option>
<option value="nl">Néerlandais</option>
<option value="fr">Français</option>
<option value="01">Anglais</option>
<option value="02">Allemand</option>
<option value="03">Latin</option>
</select><br>
</div>
</div>
<div class="control-group">
<label class="control-label">Niveau</label>
<div class="controls">
<ul id="id_level">
<li>
<label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label>
</li>
<li>
<label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label>
</li>
<li>
<label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label>
</li></ul><br>
</div>
</div>
<div class="form-actions">
<br><br>
<div class="col-md-6 col-md-offset-2">
<input type="submit" value="Publier" /><br><br><br>
</div>
</div>
</form>

You check isNaN($("#id_course")) while you probably want to check if the value of $("#id_course") is not "" (the empty string). !isNaN is in this case not the correct function to use because it will return true even for the empty string.
function hideLevel() {
if ($('#id_course').val()!="") {
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
}
hideLevel();
$('#id_course').change(hideLevel);
You can view a working jsFiddle here: http://jsfiddle.net/dvryqvLz/5/
EDIT
I first thought you want to hide the group when there is an option selected, now I realize that you probably want to hide the group when there is not an option selected. In that case you can use isNaN:
function hideLevel() {
if (!isNaN($('#id_course').val())) {
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}else{
$('#id_level').show();
$('#level').show();
$('#id_level').parents('.control-group').show();
}
}
http://jsfiddle.net/dvryqvLz/6/

isNan is a function which is used to check if the following value can be converted into a number or not. It would not be application on an element. You should use .length property to check if the element exists.
if($('#id_course').length > 0)
{
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}
To check the value for NaN:
if(!isNaN($('#id_course').val()))
{
$('#id_level').hide();
$('#level').hide();
$('#id_level').parents('.control-group').hide();
}

How to get selected value from a Flip Switch or Toggle Switch

<div class="table-thing with-label widget uib_w_114 d-margins" data-uib="app_framework/flip_switch" data-ver="1">
<label class="narrow-control label-inline">Notifications</label>
<div class="wide-control">
<input type="checkbox" class="toggle" id="af-flipswitch-1" name="af-flipswitch-1" checked="checked">
<label for="af-flipswitch-1" data-off="Off" data-on="On">
<span></span>
</label>
</div>
</div>
I am not sure how to get the value from the flip switch (On or Off) and assign to a javascript variable.
Edit: The above code is from App Designer (Intel XDK)
To get the value use,
if ($('#af-flipswitch-1').is(":checked"))
{
console.log("On");
} else {
console.log("Off");
}

flip switch html code
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<button id="submit">Submit</button>
Jquery code
$(document).delegate("#submit", "tap", function() {
alert($("#flip-1").val());
});
Click to Demo

Show hide the list by radio button in Jquery Mobile

In the following code, how can I
- If I click all, it will show both buy and rent
- If I click buy, it will show buy (Rangeslider) only
- If I click rent, it will show rent (Rangeslider) only
<div class="box-filter">
<!---------------------------------------- Filtering Start ---------------------------------------->
<ul data-role="listview" data-inset="false" data-theme="d">
<li>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend></legend>
<input name="radio-choice-h-1" id="radio-choice-h-1a" type="radio" checked="checked" value="">
<label for="radio-choice-h-1a">All</label>
<input name="radio-choice-h-1" id="radio-choice-h-1b" type="radio" value="1">
<label for="radio-choice-h-1b">Buy</label>
<input name="radio-choice-h-1" id="radio-choice-h-1c" type="radio" value="2">
<label for="radio-choice-h-1c">Rent</label>
</fieldset>
</li>
<!-- Buy Start -->
<li id="rangeslider_buy">
<div data-role="rangeslider" data-mini="true">
<label for="range-1a">Buy</label>
<input name="range-1a" id="range-1a" min="0" max="2000" value="0" type="range" />
<label for="range-1b">Buy</label>
<input name="range-1b" id="range-1b" min="0" max="2000" value="2000" type="range" />
</div>
</li>
<!-- Buy End -->
<!-- Rent Start -->
<li id="rangeslider_rent">
<div data-role="rangeslider" data-mini="true">
<label for="range-2a">Rent</label>
<input name="range-2a" id="range-2a" min="0" max="50000" value="0" type="range" />
<label for="range-2b">Rent</label>
<input name="range-2b" id="range-2b" min="0" max="50000" value="50000" type="range" />
</div>
</li>
</ul></div>

Update
In jQuery Mobile, it is recommended to use class ui-screen-hidden instead of .show()/.hide() functions, in order not to break elements structure. Also, for better results, listview should be refreshed after hiding/showing elements.
Listen to change event fired on type=radio. Give each radio button a value and accordingly show/hide elements.
$(document).on("pageinit", function () {
$("[type=radio]").on("change", function () {
if ($(this).is(":checked")) {
if ($(this).val() == "all") { /* All */
$("#rangeslider_buy, #rangeslider_rent").removeClass("ui-screen-hidden");
}
if ($(this).val() == "buy") { /* Buy */
$("#rangeslider_buy").removeClass("ui-screen-hidden");
$("#rangeslider_rent").addClass("ui-screen-hidden");
}
if ($(this).val() == "rent") { /* Rent */
$("#rangeslider_buy").addClass("ui-screen-hidden");
$("#rangeslider_rent").removeClass("ui-screen-hidden");
}
$("listview_ID").listview("refresh");
}
});
});
Demo

I would prefer not ever have if 's or switch 's and I would like to re-use the code as much as possible, so I would do as:
$(function(){
$(".radio-selectors input[type='radio']").click(function() {
// get selected radio area
var radioType = $(this).attr("data-area");
// hide all
$(".area-all").hide();
// show correct
$(".area-" + radioType).show();
});
});
with JQuery Mobile Suggestions rule about hide and show:
$(function(){
$(".radio-selectors input[type='radio']").click(function() {
// get selected radio area
var radioType = $(this).attr("data-area");
// hide all
$(".area-all").addClass("ui-screen-hidden");
// show correct
$(".area-" + radioType).removeClass("ui-screen-hidden");
});
});
new demo: http://jsbin.com/rokohive/3/edit?html,js,output
and I would append classes to the HTML code as:
<ul ... class="radio-selectors">
<input id="radio-choice-h-1a" data-area="all" ...
<input id="radio-choice-h-1b" data-area="buy" ...
<input id="radio-choice-h-1c" data-area="rent" ...
and
<li id="rangeslider_buy" class="area-buy area-all">
<li id="rangeslider_rent" class="area-rent area-all">
This way, later, you can simply add more radio buttons and more areas and you do not have to change the javascript code:
Demo in JsBin: http://jsbin.com/rokohive/1/edit?html,js,output

Try this http://jsfiddle.net/4f55k/
var $buy = $('#rangeslider_buy'), $rent = $('#rangeslider_rent');
$('#radio-choice-h-1a').click(function () { $buy.add($rent).show() });
$('#radio-choice-h-1b').click(function () { $rent.hide(); $buy.show(); });
$('#radio-choice-h-1c').click(function () { $rent.show(); $buy.hide(); });
Animated: http://jsfiddle.net/4f55k/1/