How to hide label based on child value using jquery - javascript

I want to hide an element and a label based on value:
My html code looks like this
<form id="wrapper">
<label>
<input type="checkbox" value="Slider">
Slider
</label>
</form>
So using jquery i can find an input value that contains value="Slider" but the label still remains, because it it doesn't contain any id or class and I can't add anything there, so how can I hide it
$('#wrapper').find("input[value='Slider']").each(function(){
$(this).hide()
});
Here is a JSFIDDLE.

You need to hide the parent label element to hide input element and its sibling text:
$('#wrapper').find("input[value='Slider']").closest('label').hide();

Use .has() method to checking children of element.
$("label").has("input[value='Slider']").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="Slider">
Slider
</label>
<label>
<input type="checkbox" value="Slider2">
Slider2
</label>

You can try this:
$('#wrapper').find("input[value='Slider']").each(function(){
// $(this).hide(); If you want to hide input too
$(this).parent().hide();
});

Related

Show one div and hide the other by checked radio button

I'm trying to learn how to use jquery to show/hide elements dependent on values. i'm not sure if .show / .hide is the right choice so any help will be appreciated...
Here is my example on jsfiddle where I have 2 radio buttons and 2 divs.
I want Jquery to show a single div by the dependency of the checked radio button, so it will show only the one that is checked.
HTML:
<input type="radio" name="one" value="01" checked> Male<br>
<input type="radio" name="two" value="02"> Female<br>
<div class="showhide">
show me when 01 is checked.
</div>
<div class="showhide">
show me when 02 is checked.
</div>
JQuery (trying to understand what to do here):
$("div.showhide").hide();
$("div.showhide").show();
// or maybe with:
$("div.showthis").toggle(this.checked);
Using data-* attributes comes in handy in such practices. Rember that the radios name attributes must be the same that one and only one checkbox can be checked at any given time. And, there is no p tag in your code, at least in the example provided, so why bother prefixing the selector with it?
The following example makes use of data-section attribute which has the selector for the element that must be shown when the checkbox is checked. It is worth mentioning that this is code is dynamic and does not require changing the code when adding more inputs with divs.
$(function() {
// listen for changes
$('input[type="radio"]').on('change', function(){
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$( $target.attr('data-section') ).show();
// trigger the change on page load
}).trigger('change');
});
.showhide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="one" data-section="#div-1" value="01" checked>Male<br>
<input type="radio" name="one" data-section="#div-2" value="02">Female<br>
<div id="div-1" class="showhide">
show me when 01 is checked.
</div>
<div id="div-2" class="showhide">
show me when 02 is checked.
</div>

Label focus does not change css style

I have a simple form and wanted to highlight the focused labels by changing their background colors, but the jquery doesnt seem to work here.
The console does not show any errors. Could someone please help me on this?
<form action="" method="POST" id="qrForm">
<label for="enter1">Enter<input id='enter1' type="radio" name="enter"></label>
<label for="enter2">Exit<input id='enter2' type="radio" name="enter"></label><br>
<label for="device1">Took a device<input id="device1" type="radio" name="device"></label>
<label for="device2">Returned a device<input id="device2" type="radio" name="device"></label>
</form>
<script>
$("label").focus(function(){
$(this).css('background-color', '#00CC66');
});
</script>
I could actually finish it by adding/removing a class but I wonder why this one isn't working.
why use js when you can do it in CSS?
label:focus {
background-color: #00cc66;
}
you also want to add tabindex=0 if you want your label elements to be focusable though, as if you e.g. click on a label, the focus is moved to the related input element
Alternatively, you can use the css next sibling selector as below:
html:
<input type="text" id="foo" class="foo"><label for="foo">label</label>
and the css:
.foo:focus + label {
background-color: #00cc66;
}
or play with different markup and css selectors
You cannot trigger focus for a label using .focus() instead do it with input, Check here
$("input").focus(function(){
$('label').css('background', '#00CC66');
});
or
$("input").focus(function(){
$(this).closest('label').css('background', '#00CC66');
});
try this as you can't use focus on label -
$( "form input:radio" ).focus(function(){
$(this).parent('label').css('background-color', '#00CC66');
});

Conditional field jQuery library not working with Checkbox

I am using a small jQuery library jQuery-Visibly
A jQuery Plugin designed to easily Conditionally show elements based on values of other Form elements.
Project page and documentation: http://www.danielrivers.com/visibly
Project GitHub Page: https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js
Some key features that put it above some other libraries:
Multiple fields and values can be set as a rule for revealing a hidden field instead of only a single field to field rule like other libraries do. Example; To show field 3 I can require both field 1 and field 2 to have a certain value set in both at the same time in order for field 3 to become visibble.
RegEx matching - require a text inputs text value to match the regex pattern in order for a conditional field reliant on it to be shown.
Below is my demo where I am trying to use checkboxes to reveal a hidden DIV.
In DIV ID #test I have a conditional rule set with visibly="foo:checked;foo3:checked"
This means field #foo and #foo3 should both be checked in order to reveal #test
However it is not working. It is possibble that the library only supports select and input fields and not checkbox fields but looking at the library code (125 lines) https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js on line 60 mI saw :checked which made me think it is supported but I am not 100% certain of it?
Could someone look at this to see if checkboxes should work with what I am doing?
DEMO: https://jsfiddle.net/955us4ge/
HTML
<label for="foo">
<input id="foo" name="foo" type="checkbox"> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox"> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox"> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
this should be hidden until checkbox #foo and #foo3 are both checked
</div>
JS
$(document).ready(function() {
$('#test').Visibly();
});
The Visibly plugin seems to check the value attribute of the elements that you added to the rules and checks if the value meets the condition. So if you want it to work with checkbox elements you will need to change the value attribute on them.
Here is an example.
$('#test').Visibly();
$("input").on("click", function() {
if($(this).prop("checked")) {
$(this).val("checked");
} else {
$(this).val("");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/DanielRivers/jQuery-Visibly/master/js/jquery-visibly.js"></script>
<label for="foo">
<input id="foo" name="foo" type="checkbox" value=""> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox" value=""> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox" value=""> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
This should be hidden until checkbox #foo and #foo3 are both checked
</div>
In case you'd like to do this with plain jQuery:
https://jsfiddle.net/rjmu8dus/
$(document).ready(function() {
$("input[type=checkbox]").on('change',function(){
if( $("#foo").prop('checked') == true && $("#foo3").prop('checked') == true) {
$("#test").show();
}
});
});
Something you might add is create an else that says if they are not clicked to not show them.

How do I disable tabbing in child divs

I have a div element with several children. I need to disable tabbing in all of them. I have been using tabindex but is there any way to disable them all by setting a value in the parent.
I don't want to touch the child divs.
I have no idea what your code looks like but you could grab the parent element and add the tabindex attribute to its children that are inputs using attr() as follows:
$(".wrapper").children("input").attr("tabindex", "-1");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" name="1">
<input type="text" name="2">
<input type="text" name="3">
<input type="text" name="4">
</div>
NOTE: when you say "I don't want to touch the child divs" I'm assuming you mean you don't want to manually go through every instance and add tabindex as it would be time consuming?
More info: http://api.jquery.com/attr/

Adding class to next element using jquery

I am having html like this:
<form>
<div class="row">
<input type="radio" class="radio">
<label>Text</label>
<input type="radio" class="radio">
<label>Type</label>
</div>
</form>
Now I need to apply a class to each label immediate after each <input type="radio">.
I am using jquery like this:
if($('input').hasClass('radio')){
$(this).next().addClass('radio-url');
}
I am trying to add class 'radio-url' to each <label> immediately after radio tag.
What mistake have I did in this?
You can use .siblings()
$('input[type="radio"]').siblings('label').addClass('radio-url');
DEMO
Or
$('input[type="radio"]').next('label').addClass('radio-url');
DEMO2
You can use next() function
$("input:radio").next('label').addClass("radio-url");`
Try:
$(':radio').next().addClass('radio-url');
jsFiddle example (I threw a text input in there so you can see that it works on only radio inputs)
This answer doesn't directly answer your question!
I believe that your label should have the for attribute so that the label is associated with the radio button. This allows the user:
To check the radio button by clicking the label!
If the input type is text, clicking the label focuses the text input
For accessibility reasons
HTML
<div class="row">
<input type="radio" class="radio" id="text"></input>
<label for="text">Text</label>
<input type="radio" class="radio" id="type"></input>
<label for="type">Type</label>
</div>
JQuery
Search the label using the radio element's ID.
$('input[type="radio"]').each(function(){
var radioId = $(this).attr("id");
$("label[for='" + radioId + "']").addClass('radio-url');
});
Fiddle: http://jsfiddle.net/78zAB/
DEMO
$('input.radio').each(function () {
$(this).next().addClass('radio-url');
})
Use CSS element+element selector:
$('input:radio + label').addClass('theClass')
http://jsfiddle.net/ttnUU/
Works optimal
$('input[type=radio]').next('label').addClass('radio-url');
http://jsfiddle.net/q76FJ/
You need to loop through all radio buttons:
$('input[type="radio"]').each(function(){
$(this).next().addClass('radio-url');
});
Or
$("input[type='radio'] + label").addClass('radio-url')
Fiddle Example
Example 2
Posting this as an answer as all of the others are using the incorrect selector, or don't specify the label in next():
$('input.radio').next('label').addClass('radio-url');
.. which will add the class radio-url to all label elements which come immediately after an input with the class radio

Categories