css metro-ui not able to show focus on check-box - javascript

Hi i have a check box using metro-ui
<label class="text_blue small_text">
<input name="enterprise_admin_session[remember_me]" type="hidden" value="0"><input tabindex="3" type="checkbox" value="1" name="enterprise_admin_session[remember_me]" id="enterprise_admin_session_remember_me">
<span class="check border_radius_zero"></span> Keep me logged in </label>
when i use tab and focus on this check-box , i am not able to identify the checkbox is focused. Don't know what i am missing
Or if there is any way from jquery to catch the focus event on the checkbox input and then change the css of <span class ="check border_radius_zero"></span>
Please help me to fix it, Thanks

I'm not really sure what your problem is, but if you want to do it with jQuery here is an example of how you can do it.
$("input[type='checkbox']").focus(function(){
var span_element = $(this).next("span.check.border_radius_zero");
// Change background color
span_element.css("background","red");
// Or Toggle class
span_element.toggleClass("className");
// Or Whatever you want to do with that span
span_element.DoWhateverYouWantWithMe();
});
If you need to discard that changes you made on focus, you can attach a blur event handler.
$("input[type='checkbox']").blur(function(){
var span_element = $(this).next("span.check.border_radius_zero");
// Change background color
span_element.css("background","initial");
// Or Toggle class
span_element.toggleClass("className");
// Or Whatever you want to do with that span
span_element.UnDoWhateverYouWantWithMe();
});
I personaly prefer do it with a class so you can simplify the code, even use the same handler! For example, you can do this.
$("input[type='checkbox']").focus(function(){
var span_element = $(this).next("span.check.border_radius_zero");
span_element.addClass("className");
}).blur(function(){
var span_element = $(this).next("span.check.border_radius_zero");
span_element.removeClass("className");
});
With the same handler:
var focus_blur_event_handler = function(){
var span_element = $(this).next("span.check.border_radius_zero");
span_element.toggleClass("className");
}
$("input[type='checkbox']").bind("focus",focus_blur_eventHandler);
$("input[type='checkbox']").bind("blur",focus_blur_eventHandler);

No need of Javascript or Jquery. You can style using CSS by simply adding this to your stylesheet.
input[type="checkbox"]:focus ~ .check{
/*Your style goes here*/
}
For reference, how to use general sibling selector(~) follow this link http://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/
Here's the fiddle:
https://jsfiddle.net/6a14tfd0/1/
input[type="checkbox"]:focus ~ .check{
color:red
}
<label class="text_blue small_text">
<input name="enterprise_admin_session[remember_me]" type="hidden" value="0">
<input tabindex="3" type="checkbox" value="1" name="enterprise_admin_session[remember_me]" id="enterprise_admin_session_remember_me">
<span class="check border_radius_zero">***</span> | Keep me logged in </label>

Related

jquery - check/uncheck customized checkbox with hidden input

I have this in HTML
<div class="my-checkbox">
<label>I do agree</label>
<input type="hidden" name="agreement" value="0">
</div>
and this in jQuery
$('.my-checkbox').on('click', function()
{
if($(this).children('[type="hidden"]').val() == 0)
{
$(this).children('[type="hidden"]').val(1);
$(this).addClass('active');
}
else
{
$(this).children('[type="hidden"]').val(0);
$(this).removeClass('active');
}
});
When I click .my-checkbox, it will change the value to 1 and add class active and when I click it again vice-versa. It works correctly but in mobile device when I click it it changes the value and set to active but when I click it again, it changes the value but the active class doesn't remove. How do I know that? just by double clicking and submit the form and the result was => you should agree with agreements.
Thanks
Makes no sense to reinvent the checkbox when it is a is simple CSS to change the style to make it work the same way. No adding/removing classes. No JavaScript needed, just a simple CSS selector.
#agree + label {
color: red
}
#agree:checked + label {
color: green
}
<div class="my-checkbox">
<input type="checkbox" id="agree" name="agreement" hidden>
<label for="agree" >I do agree</label>
</div>
Now why does your code not work?
if($(this).children('[type="hidden"]').val() == 0) <-- If zero
{
$(this).children('[type="hidden"]').val(0); <-- set zero
You are not toggling to 1. You have your logic reversed.

Javascript/jQuery: search within object

I have the following code.
<div class="days">
<input name="days-select" type="radio" value="Mon" > Mon </input>
<br>
<input name="days-select" type="radio" value="Tue" > Tue </input>
</div>
<script>
$(document).ready(function() {
radiobtn = $('.days');
radiobtn.find('value="Tue"').prop('checked', 'checked');
});
</script>
Basically, I need a two-stage search. First, find the group of radio buttons, then set one of them as checked. HOWEVER, I do not want to combine these two steps into one. Thanks for the hint.
BTW, since I am new to Javascript I would like to ask how to debug this code. For example, single-step through the script, and after "radiobtn = $('.days');" check whether "radiobtn" is assigned correctly etc. Thanks again.
HTML
<div class="days">
<input id="dayMonday" name="days-select" type="radio" value="Mon">
<label for="dayMonday">Monday</label>
<br>
<input id="dayTuesday" name="days-select" type="radio" value="Tue">
<label for="dayTuesday">Tuesday</label>
</div>
script
$(document).ready(function () {
//your .days selector is actually getting the div and not the radio button
var div = $('.days');
//maybe here you want to do some things with the div...
//...
var radiobtn = div.find('input[value="Tue"]');
//maybe here you want to do some things with the radio button...
//...
//now you have the correct element...
radiobtn.prop('checked', true);
//F12 in Chrome to see the console
console.log(radiobtn);
//notice the selector property returns: .days input[value="Tue"]
console.log(radiobtn.selector);
//so you could just do this all in one line:
$('.days input[value="Tue"]').prop('checked', true);
//see last commented line regarding this next line...
//$('.days input[value="Tue"]').click(
// function(){ console.log("you clicked Tuesday");});
//Note: you could do this:
//radiobtn.click();
//... or this:
//$('.days input[value="Tue"]').click();
//but it also fires the click event which is why you would see
//"you clicked Tuesday" in the console with the above line uncommented
});
Here's a fiddle.

change hidden name attribute after radio button is clicked

I have the need to change the name=' ' attribute of a hidden input when one of the radio buttons in a group is selected.
<input type="hidden" name="OptionName2" value="Premium Bundle Addons">
<input type="hidden" name="" value="PremiumBundleAddon">
HBO & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-CIN-STAR"><br />
HBO & Cinemax & Showtime Package
<input type="radio" name="OptionValue2" value="3ITEM-HBO-SHO-CIN"><br />
HBO & Showtime & Cinemax & Starz Package
<input type="radio" name="OptionValue2" value="ALL-HBO-SHO-CIN-STAR">
The name="" needs to change to name="ADD" when one of these radio buttons is clicked.
Here is what I have tried but I really struggle with javascript. If anyone could help dumb it down for me that would be amazing!
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='opt2']").name() = "ADD";
});
});
As far as I see you don't have any hidden element with name opt2. Did you mean OptionName2?
Also, it's not correct the method you're using to change the name.
Try with this
$(":hidden[name='OptionName2']").attr("name", "ADD");
You can use simple javascript for this..
Just add id="changehid" to your hidden field.
Then you can use this function to change it:
function change() {
document.getElementById('changehid').name = "ADD";
}
Cheers
Evert
EDIT
Here's the code : http://jsfiddle.net/hCnyd/3/
I tested it with Safari Inspector, and it adds the name.
http://i.stack.imgur.com/aXjIE.png

Javascript display same content on each checkbox clicks?

I have multiple check boxes and i want them to display the same content when each of them is clicked. Now when I click on one check box, the content appears, but until I unclick it the next checkbox won't display any content. I want the all the contents to be displayed as long as check boxes are clicked. any tip with this.
I tried this:
function showTime(days){
var showTime = document.getElementById("time_schedules");
var days = document.getElementById("schedule");
if (days.checked) {
showTime.style.display = "Block";
}
else{
showTime.style.display = "none";
}
}
Insert some class attribute to all your checkboxes so you can select them, then capture the click event, iterate over all checkboxes and perform whatever you need to do (setting label etc).
I recommend using some javascript library such as jquery, for example:
<input type="checkbox" name="cb1" class="cb" />
<label for="cb1" class="cblabel">label1</label>
<input type="checkbox" name="cb2" class="cb" />
<label for="cb2" class="cblabel">label2</label>
$('.cb').bind('click', function() {
$('.cblabel').each(function(i,v) { v.innerHTML = 'hello'; });
});
http://jsfiddle.net/3EMyY/

How to output the value of my radio button when click

I'm very noob in javascript. My question is how do I show the value of my radio button when click?
I have this code:
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="40%">
<input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
<input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
<input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
</td></tr>
Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.
Use the jQuery class selector and attach to the click event:
$('.hover-star').click(function () {
alert($(this).val());
}
Here's a working jsFiddle fiddle.
Alternatively, you could attach to the change event.
$('.hover-star').change(function () {
alert($(this).val());
}
Take a look at the jQuery selectors documentation.
With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):
$(".hover-star").click(function() {
var selectedVal = $(this).val();
});
You could also use the change event, which fires whenever the selected radio button changes:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
});
You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.
Update based on comments
As you want to put the value into a div, you can simply do this inside the change event handler:
$("#yourDivId").text($(this).val());
Try this
$('.hover-star').click(function () {
alert($(this).val());
}
Here you go ...
$('.hover-star').click(function (){$('#someDiv').text($(this).val());
Jquery COde:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
alert(selectedVal);
});
See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/

Categories

Resources