We Keep Coding

checkbox toggle change without any user interaction

I call a function in jquery for a checkbox toggle change. It works as expected.
Now I want to change this when the box is checked show some tables else hide.
But I don't know how to modify my function.. [1]
How can I modify this ?
[1]
HTML
<label class="checkbox"> <input type="checkbox" id="toggleSequence" name="sequence_check" id="sequence_check">
Jquery
$("#toggleSequence").change(function(e){
if($(this).is(":checked")){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});

JS Fiddle
$('#toggleSequence').parents('table').next().hide(); // first you need to hide it use can also use css for this
$("#toggleSequence").change(function (e) {
if ($(this).is(":checked")) {
alert();
$(this).parents('table').next().show();
} else {
$(this).parents('table').next().hide();
}
});

Jquery is checked doesn't get trigger

http://jsfiddle.net/1uvL7tcm/
$(document).ready(function () {
if ($('#plainText').is(':checked')) {
alert('checked');
}
});
What's wrong with my code? the alert doesn't get trigger.

Try http://jsfiddle.net/1uvL7tcm/3/
You need to bind to all checkbox elements change event as such:
$("input[type=checkbox]").change(function(){
if ($(this).is(":checked")){
alert('checked');
}
});

The code you have runs once, when the page loads. If your checkbox is checked by default, you will get the alert. I modified your jsFiddle to have it checked by default and you get the alert: http://jsfiddle.net/1uvL7tcm/2/
If what you're looking for is to have this code triggered anytime a checkbox is changed, you will have to add a change handler:
$('input[name="checkbox"]').change(function() {
if ($(this).is(':checked')) {
alert('checked');
}
});

In your case the checked condition is only checked once when the dom ready event is fired... what you need is to check the condition whenever the checked state is changed... for that you need to write a handler for the change event using change() method from jQuery.
Since you want the same handler to be fired for all checkboxes, you can use a common attribute among all the three checkboxes which is its name as a selector. So
$(document).ready(function () {
$('input[name="checkbox"]').change(function () {
if (this.checked) {
alert('checked: ' + this.value);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="plainText" value="status">
<label for="plainText">Status</label>
<input type="checkbox" name="checkbox" id="image" value="Images">
<label for="image">Images</label>
<input type="checkbox" name="checkbox" id="video" value="Video">
<label for="video">Video</label>

Try This..
$('#plainText').on('click',function(){
if ($('#plainText').is(':checked')) {
alert('checked');
}
});

Try this...
$(document).ready(function(){
$("input[type=checkbox]").change(function(){
if ($("#plainText").is(":checked")){
alert('checked');
}
});
});

Working With checkboxes in the web pages

I have group of checkboxes and that are compulsory to be applied but the situation is user can be able to check only one check box at a time. So, for this I have implemented something like this with the help of internet. No doubt it works fine when there are no checkbox checked by default. But suppose, one of the checkbox is checked true when page loads, then this does not works unitl I click on checkbox twice.
Here is what I am using::
So , Assuming I have set of 5 checkboxes, I set same class name for all the checkboxes and then
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
In View page I have declared::
function Checkme(class_Name) {
Check_OR_Uncheck(class_Name);
}
In Common js::
function Check_OR_Uncheck(class_Name) {
$("." + class_Name).click(function () {
if ($(this)[0].checked) {
$("." + class_Name).each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
}
else {
$(this)[0].checked = false;
}
});
}
Please Help me to achieve this..

Keep your code in the document ready event. This will register the click event for "myclass".
$(".myclass").click(function () {
if ($(this)[0].checked) {
$(".myclass").each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
} else {
$(this)[0].checked = false;
}
});
jsfiddle

You could use document ready handler and call method:
jsFiddle
$(function(){
$(':checkbox:checked').each(function(){
Checkme(this.className);
});
});

Try this
$(function(){
$('.myclass').click(function(){
var s=$(this).prop('checked');
if(s==true)
{
$('.myclass').prop('checked',false)
$(this).prop('checked',true)
}
});
});
Or
You simply can use
if(s==true)
{
$(this).siblings().prop('checked',false);
}
FIDDLE

Try this
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})

Instead of implementing a group of check boxes that behave like a group of radio buttons, I suggest implementing a group of radio buttons that look like a group of check boxes:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
This approach simplifies your implementation; you have two one-line CSS rules instead of a JS event handler function, event binding (on both document ready and the HTML element itself), not to mention a possible dependency on jQuery (if you choose to use it).
The catch to this approach is that it requires CSS3 support. For more info, check out this SO answer: https://stackoverflow.com/a/279510/2503516

JQuery script for one checkbox selection from group not working while adding a checkbox dynamically

i'm using the below jquery script to disable user from selecting more than 1 check box of same name at a time
$("input:checkbox").click(function () {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
And here is the check boxes
<div class="ChekMarkWrap">
<input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />film
</div>
<div class="ChekMarkWrap">
<input id="chkTv_4" type="checkbox" name="four" /><br />tv
</div>
<div class="ChekMarkWrap">
<input id="chkWeb_4" type="checkbox" name="four" /><br />web
</div>
<div class="ChekMarkWrap">
<input id="chkStage_4" type="checkbox" name="four" /><br />stage
</div>
It works well and good until i add a new check box dynamically.i'm binding the above jquery script on document.ready()

Fiddle: http://jsfiddle.net/3hcFp/2/
That method binds the click event only once, so elements added after that code has been run will not have the event bound. What you need to do is set up a listener instead, like so:
$('body').on('click', 'input:checkbox', function () {
// Do some stuff
}
In the fiddle, i have wrapped the checkboxes in a form#exampleForm, and replaced body in the above example with that.
EDIT: Updated fiddle with live example of adding more checkboxes.

Try like this:
$("body").on('click',input:checkbox,function () {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
When you add new content you need to append it to the DOM.
But you can target a parent element that was not added after the DOM was loaded to be able to reference/attach-event to it using .on() and passing the selector as I wrote above on the first line of your code..

You should use delegated events. Your code is running on document ready. Nothing is bound to new elements.
$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});

You can try using delegates. Something like this:
$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
//your functionality
});
For Reference: jQuery Documentation

How do I check if a checkbox is checked with JQuery?

I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.
I think I am close, but it doesn't seem to be working.
Here is my code:
if($('#foreign_checkbox').attr('checked')) {
$('#additional_foreign').click(function() {
alert('This click function works');
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.
What am I doing wrong?
EDIT:Here is my HTML for clarification.
<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>

try using $('#foreign_checkbox').is(":checked") - rest of the code looks fine
If this was my code I'd do something like this to make it work:
<input id="foreign_checkbox" type="checkbox" />
<span style='display:none' id="additional_foreign">Click Me</span>
<script type="text/javascript">
$(document).ready(function() {
$("#foreign_checkbox").click(function() {
if($('#foreign_checkbox').is(':checked')) {
$('#additional_foreign').show();
} else {
$('#additional_foreign').hide();
}
});
$('#additional_foreign').click(function() {
alert('This click function works');
});
});
</script>

The problem is that the code doesn't run continually, only when the page loads, when all the boxes are unchecked. You need an action that fires when the box is checked or unchecked, which adds an action or a class to the button:
$('#foreign_checkbox').change(function(){
if (this.checked){
$('#additional_foreign').click(function() {
doSomething();
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
});