We Keep Coding

Prevent swiching type="radio" elements after restoring Firefox tab

I have two < input > elements type="radio". One of them is checked by default. In Firefox browser when I check another < input > element which is not a default one, and when I close the tab and restore that tab back I've got that "not a default" < input > element is CHECKED! (In Chrome it's not happening.) That's not ok 'cause the price is from another option and a picture belongs to another option.
$(window).load(function(){
$('input').prop('checked', true);
};
I was trying to add this to "reload" check element, but this "script" forces element to be checked after page is loaded if it was being changed WHILE the page is loading...
This is the page code:
<div class="radio">
<input class="not4kt" autocomplete="off" name="option[23]"
value="52" id="option-value-52" data-price_prefix="-"
data-price="205.0000" onchange="recalculateprice('117_cp');"
onclick="chimg('117', '33')" type="radio">
<label for="option-value-52"></label>
<label for="option-value-52">
<span>33 см</span>
</label>
</div>
<div class="radio">
<input class="rst4kt" autocomplete="off" checked="checked" name="option[23]" value="51"
id="option-value-51" data-price_prefix="+" data-price="0.0000"
onchange="recalculateprice('117_cp');"
onclick="chimg('117', '44')" type="radio">
<label for="option-value-51"></label>
<label for="option-value-51">
<span>44 см</span></label>
</div>
How can I get both? --> (1) keep the element checked by default to be checked after restoring the Firefox tab; (2) prevent switching to the "checked by default" element after the page is loaded if WHILE the page was loading another element was clicked.
UPD!
Actually I have ~20 dynamically changing IDs inside of < input > ... So I can't use #optionval-a ... cause it always might be #optionval-b or #optionval-foo-bar or even #optionval-123... The only possible way to call the elemnt is: $('input') -- and that's the problem...

Now sure what you mean by the first requirement - do you mean reloading the page? If so, you should expect the browser to load the page with the default element checked.
To prevent the checkbox being set to the default if a user has checked a button before the page has finished loading - i.e. before the $(window).load(...) function is called, you could set that function to check on the status of the radio element, though I think you will need to rewrite the function, as at the moment it will run through ticking each box until it finds the last 'input' element, because the jQuery selector in the above code is set to input, although you probably meant :input, but anyway, to allow a user to select a box before the page is loaded without the onload function re-setting the choice, you could check that every other box was not checked to be sure it was OK to check the default box:
$(window).load(function(){
if (!$('#optionval-a').is(':checked' && !$('#option-value-b').is(':checked' && !$('#option-value-c').is(':checked'){
$("#option-value-51").prop("checked", true);
}
}
Also this answer might be helpful.
If you mean that Firefox seems to be caching a user's input if they immediately re-load the page after closing using Ctrl + Shift + t, then I think they would be doing that deliberately to help users they believe wish to open the last tab exactly as they had left it. The only solution I can think of for this case would be a script using setTimeout() or equivalent jQuery function which you could perhaps set on page load, since I doubt Firefox would over-ride any such behaviour on page load. Thus:
$(window).load(function(){
// possibly set radio boxes here...
// ...or better still do everything inside the timeout function, thereby solving both problems at once:
setTimeout(function(){ alert("I really want my page to do this"); }, 3000);
}
One alternative might be not to fully show the form until the page has finished loading. Or you could insert a hidden input radio element (whose name is static - like name="hiddenCheckedRadioElement" ) first in the list with "checked" and then check if it is still checked once the page is loaded. If so, check your chosen field. If it is not checked it would mean the user has selected something else, and so you would then not check your default box.

Checking/unchecking a box with JQuery

I'm having some trouble using JQuery to check and uncheck an input. I know that .prop is the proper way to do it, but it doesn't seem to be working for me. Here's my code:
HTML:
<div class="checkwrap"><input name="mentoringType" type="checkbox" checked="false" value="test">test</div>
JS:
$('.checkwrap').click(function() {
if ($(this).find('input').is(':checked')){
$(this).toggleClass('checkwrap-active').find('input').filter(':checkbox').prop('checked',false);
} else {
$(this).toggleClass('checkwrap-active').find('input').filter(':checkbox').prop('checked',true);
}
});
The input is wrapped for styling purposes. If I use .attr('checked',true/false) instead, then it works to change the checked property to checked, but it does not uncheck. What's going on?

Eggplant is right: you should use a lebel element to make "test" clickable.
To answer your question:
Your skript does work, when only the text ist clicked.
It also works, but not as expected, when the checkbox is clicked. In this case your code leads to a duplication of the ation executed, because the click event bubbles up the DOM tree.
If the checkbox is not selected, a click on it makes it being selected and your code comes in, detects it as being selected and unselects it again.
For an unselected box it works vice versa.
But as stated before: you should have chosen a label in the first place.

How to make checkbox mandatory even on bowser back button click using jquery?

I am facing a situation like below.
WebPage1 with fields and a check box (Agree terms)
WebPage2 check if checkbox is checked and initiates emailing
After the page1 form fields are filled, checkbox is checked (I agree to terms) and submitted to Page2, Page2 detects checkbox checked state and proceeds emailing. - works fine
Now the issue is,
if in the browser "Go back button" is clicked while in page2, page 1 gets loaded (checkbox shows unchecked) and then if browser "Go forward button" is pressed WITHOUT checking the checkbox, page1 gets submitted and page2 starts emailing.
I want the checkbox to be mandatorily checked before going to Page2 even if the browser Back and Forward buttons are used by the user. Mainly, to protect from webform spamming.
How can this be achieved ? Please help.

What you can do is pass the Iagree value into the get so when they go forward to the page they would get something like "/account/register?terms=true" then the input with the name terms will be set to true.
However having two pages for what you are trying to archive may not be a great idea because it allows people to do the whole back/forward thing.
What I have done is created a simple jsFiddle with a solution which should be help you
jsFiddle : https://jsfiddle.net/vq0y78ea/
Html
<div class="section1">
<input type="checkbox" class="TsCs" />
<p>Terms and Conditions</p>
<button class="agree-to-terms">I agree</button>
</div>
<div style="display:none" class="section2">
<label>Email address</label>
<input type="textbox" />
<button class="register-account">Register</button>
</div>
Javascript / jQuery
$(function () {
$('.agree-to-terms').on('click', function () {
if ($('.TsCs').is(':checked')) {
$('.section1').slideUp();
$('.section2').slideDown();
}
});
$('.register-account').on('click', function () {
if ($('.TsCs').is(':checked')) {
$('form').submuit();
}
else
{
alert('There was a problem with the Ts and Cs, please check "I agree"');
$('.section1').slideDown();
$('.section2').slideUp();
}
});
});
Basically the webpage will just have one form on it, when the user has checked the I agree to terms and condtions it will hide the I agree section and display the register section. This will stop the user from going back and forward, also if the user doesn't check the checkbox and attemps to submit I have used jQuery to make sure they have checked it or they can't submit.
Also what you can do with the form post, with the code that uses the form values in the post method, post the value of the checkbox make sure it is checked/true, if not just return the page.

Radio button html missing checked attribute, though Firebug indicates it is checked

Summary of problem statement: Radio button html on the browser does not display the checked attribute, but Firebug indicates that the radio's checked attribute is set as checked.
Tested on
Broswer: FF 3.6.18 and IE8
jQuery: 1.5
MVC3 (Razor)
Details
Using MVC3 (with Razor) I'm rendering the following radio buttons from the server. The desired functionality is that on checking one radio, the other should be unchecked and vice-versa. In other words, the user is allowed to only select one option - say val1 or val2.
<div id="myRadioList">
<div>
<input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
</div>
<div>
<input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
</div>
</div>
What I'm observing is that if the user toggles the radio selected, the newly selected radio (let's say myRadioName_val2) is shown to be checked using firebug but the html still reflects the other radio button as checked. Because of this, some other validations are failing.
I've tried literally removing all checked attributes of both the radio buttons and then just check the one that's clicked.
This is what I'm doing to set the currently clicked radio, that is not working:
$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');
I'm simplifying my code to avoid posting unnecessary details.

The checked attribute in HTML is the default value.
The checked property in JavaScript refers to the current state of the radio button.
Generally, it's best to let the browser handle the checked state of radio buttons and checkboxes rather than setting it yourself, otherwise you run into these kinds of problems. It's safe to get the current state via prop("checked") as already suggested, or through .is(":checked").
You may also want to consider using syntax like $('#myRadioList').find('input[value="myRadioName_val2"]') or better yet, $('#myRadioName_val2'), as child selectors in jQuery can be rather slow, since they are read right to left.

You should use
$("#myRadioList > div > input[value=myRadioName_val2]").prop('checked', true);

Well, you do have a syntax error withing the jQuery selector. It should be:
$('#myRadioList > div > input[value="myRadioName_val2"]')

how do I grab the value of a checkbox using javascript?

I have a javascript that needs to grab the value of a checkbox when its checked and ignore its value when its not checked.
Right now i'm grabbing the value of the checkbox with:
$("input[name='tos']:checked").val()
It works when you check the box and submit the form, but if you uncheck it and resubmit the form the old value of "agree" is given. So i'm wondering how to I grab the value of a checkbox only when its checked?

http://jsfiddle.net/dqy5H/
Here is an example fiddle. Sorry for the bad first response.

Don't forget that unchecked checkboxes don't travel in form submission. Your code is ok, but you may have the old value stored on server side.
A workaround is tht you could have an <input type="hidden"/> that changes its value when you check/uncheck the checkbox, and read this hidden on the server. Or simply, ask if the checkbox arrived to the server, if it didn't it means it was unchecked.
Hope this helps. Cheers

Two things, in order of least to most helpful :)
A checkbox should never return a value of "agree"! I'm hoping you misspoke.
I'm not sure the jQuery selector you used there is actually valid. As the other fellow mentions, it is but it only ever sets the value when it's checked. Oof, my bad. In any case, I'd still recommend giving the checkbox an ID/unique class, and then do:
var checked = $('#toscheckbox').val();
You can add IDs without messing up the form's submission data, and I prefer them - names are so fiddly.

Try giving it an id and calling .is(':checked') like in this article to see if it is checked or not.
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html