Develop Reference

On checking "Mr." radio button it should select "Male" radio button. Please tell me what went wrong? Its not selecting Male radio button [duplicate]

With HTML a checkbox is created like this:
<form>
<input type="checkbox" id="category1">Category1<br>
</form>
With javascript we can check the checkbox like this:
$("#category1")[0].checked = true
Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:
<form>
<label>
<input name="checkbox-0 " type="checkbox">Check me
</label>
</form>
Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?
How can I check this checkbox here with Javascript/jQuery?
I tried the code above, but it doesn't seem to work for this checkbox.

You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.
Demo
$('.selector').prop('checked', true).checkboxradio('refresh');
Reference: jQuery Mobile API

You can do:
$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked = $('input[name="checkbox-0"]').prop("checked"); //gets the status

Straight from the jQ Mobile docs:
$("input[type='checkbox']").attr("checked",true);

With the solution from #Omar I get the error:
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
I actually had a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
and found the solution was:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
Notes
I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...

identify button click event using text jquery

I have three buttons which are automatically generated with a jQuery plugin.
<button class="execute">Invoice1</button>
<button class="execute">Invoice2</button>
<button class="execute">Invoice3</button>
I want to write jQuery (JS) code to update form textbook only click Invoice2 button.
So, I want to write jQuery to identify it using text on button. I can write jQuery to update text box, but I don't know how to separately click Invoice2 button from others. I can't add another class or id because the buttons are generated automatically.

Try to use :contains like,
$('button:contains("Invoice2")').on('click',function(){
alert('Invoice 2 clicked');
});
This demo can help you more.

You can use below code:
$('.execute').click(function(){
if($(this).html() == 'Invoice2') {
//Do your stuff
}
});

Use :Contain function in the jquery and check weather the text contains Invoice2 or not if yes than execute the code. Here is the sample of the code
<script>
$(document).ready(function(){
$('button:contains("Invoice2")').on('click',function(){
alert("Invocie2 input was clicked");
});
});
</script>

Issue with jQuery :not selector

I have a search icon that when hovered over reveals an input text search box. I'm using jQuery to add a class to the input to reveal the text box when the search icon is hovered over. That is working fine.
The next function is that if the user decides not to click in the search box and elsewhere on the page, the search box goes away. That's working fine too.
The only remaining issue is that if the user clicks in the search box, it also goes away which I don't want.
My HTML:
<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">
<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">
My jQuery:
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body:not(.text-hidden)").click(function(){
//alert('The body click is working!!!');
$('.form-text.text-hidden').removeClass('hover');
});
Note that I'm attempting to use the :not selector to indicate to only remove the hover class if clicked anywhere but the search box but it's not working.
I've got a fiddle here

Try
jQuery(function(){
$(".search-hover").hover(function () {
$('.text-hidden').addClass('hover');
});
// Now remove the class in case of a false start or the user decides to do something else.
$("body").click(function(e){
//alert('The body click is working!!!');
if($(e.target).closest('.text-hidden').length == 0)
$('.form-text.text-hidden').removeClass('hover');
});
})
Demo: Fiddle

The problem is that when you click the input, the body's click event still arises.
There's a simple solution. Just stop the event's propagation when the input's being clicked.
jsFiddle Demo
$(".form-text.text-hidden").click(function(e) {
e.stopPropagation();
});
P.S - Notice that I've removed the :not selector from the JS. It has become unnecessary.

Removable Checklist Items

I am trying to create an interactive to do list in which I enter text into a text box, click a button, and it adds the items underneath. So far I have successfully been able to add items to my list using the button but am not able to remove one item at a time by clicking on it, which is what I would like to be able to do. (Ideally each item would have a check box next to it and when I click that the item would disappear). So far, using the .remove() action I have only been able to make ALL of the items in my list disappear by clicking. I did some research and thought that the .on() action may be what I need. I tried it and now I cannot make items disappear at all. This is my code:
$(document).ready(function() {
$('#button').click(function() {
var toAdd=$('input[name=checkListItem]').val();
$('#item').append.('.list');
});
$(document).on('click','item',function() {
$(this).remove();
});
});
Is there anything that stands out as being incorrect? Or is there a better way to go about this? I am brand new to this and appreciate any and all feedback.Thank you!

I forked your fiddle, with corrected code: http://jsfiddle.net/XEDHJ/2/
Here's where you were having trouble:
$('.list').on('click','input',function() {
$(this).parent().remove();
});
Using on was the right idea, it's perfect for this situation. The way you use on is that you have a parent node, in this case a div with a class of list, and a number of matched child nodes, in this case any element that is an input underneath your parent node. Child nodes are denoted by the selector in the second argument. This will match any input node under your div even if they are created after the page is rendered.
Because I wrapped your input in a <div> tag, we actually want to remove that parent <div>. So we call $(this).parent().remove().
I left my original example below but this should be sufficient to get you going.
It looks like something like this is what you're looking for:
Fiddle
http://jsfiddle.net/Khesy/
JavaScript
$(document).ready(function() {
$('#button').click(function() {
$('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>");
});
$('#item').on('click','input',function() {
$(this).parent().remove();
});
});
HTML
<input id="button" type="button" value="Add Item"></input>
<div id="item">
</div>

Jquery disable button until ready

I am in the middle of this site here http://offline.raileisure.com/
the booking section on the right hand side, I need to be able to disable the book now button until the date,duration and adult and children numbers are set..
I can't work out how to do it..
Any ideas ??
Thanks
Lee

You can bind to the change handler on all your form elements... for example:
$(':input').change(function() {
var complete;
// check if your form is complete here
// assumes the id of the button is 'bookNowButton'
if (!complete) $('#bookNowButton').attr('disabled', true);
else $('#bookNowButton').removeAttr('disabled');
});
To simplify the enable/disable functionality I'd also perhaps suggest changing your "Book Now" button to an <input type="image" /> instead.