We Keep Coding

Open a bootstrap modal by pressing a checkbox?

I search to open the modal #LoginModalStart, with a checkbox, but the page open this modal with every checkbox.
Can you help me ?
$('input[type="checkbox"]').on('change', function(e) {
if (e.target.checked) {
$("#LoginModalScreenplay").modal();
}
});

$('input[type="checkbox"]') targets every checkbox on your page. You probably want to target the specific checkbox. Something like this
<input type="checkbox" id="my-special-checkbox">
$('#my-special-checkbox').on('change', function(e) {
if (e.target.checked) {
$("#LoginModalScreenplay").modal();
}
});

You have to pass show to modal method:
$('#LoginModalScreenplay').modal('show')

You use this,
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=1>
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=2>
<input name="checkbox" type="checkbox" id="my-special-checkbox" value=3>
<script>
$(document).ready(function(){
$('input[name="checkbox"]').on('change', function(e) {
var x = $(this).val();
$("input:checkbox").prop('checked', false);
if(x==1){
$("input[value="+x+"]").prop('checked', true);
$("#LoginModalScreenplay").modal(); //or $("#LoginModalScreenplay").show();
}
});
});
</script>

Select All Checkbox with Trigger - jquery

On my SelectAll checkbox and click trigger should work for all input - which has on-click event on it.
trigger working on selectall, but uncheck selectall not working. its didnt uncheck all input
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
Below what i have did
$(document).ready(function () {
$("#SelectAll").click(function () {
$(".checkBoxClass").attr('checked', $(this).attr('checked'));
$(".checkBoxClass").change(function(){
if (!$(this).attr("checked")){
$("#SelectAll").attr("checked",false);
}
});
});
});
Above Jquery working for select-all / UN-select all checkbox - which works if i remove below trigger
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true); // if i remove this line then selectall for checkbox don't works
});
});
but i need above jquery to trigger - total_select function
function total_select(id,carat,price){
var lenChkBox = $("input[name='pid[]']:checked").length;
if(document.getElementById("pid_"+id).checked==true) {
total_select.s++;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c +=carat;
var cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p +=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
} else {
total_select.s--;
document.getElementById("noofs").innerHTML=total_select.s;
total_select.c -=carat;
cs = (total_select.c).toFixed(2);
document.getElementById("carat").innerHTML=cs;
total_select.p -=price * carat;
avg_price_per = total_select.p/total_select.c;
var ca = (avg_price_per).toFixed(2);
document.getElementById("price").innerHTML="$"+ca;
}
i tried many :
$(".checkBoxClass").attr('checked', true).triggerHandler('click');
$(".checkBoxClass").prop('checked', true).triggerHandler('click');
but still not working , it do check all input on 'SelectAll' and trigger total_select function with proper result , but when i do un-select/uncheck on 'SelectAll' none of my input get un-select/uncheck

You can both solve your problem and improve code quality by using unobtrusive event handlers instead of outdated on* event attributes.
Firstly you can assign each .checkBoxClass its own change event handler, which can then read the meta data from some data attributes you place on the elements.
Then the select all logic can be simplified to check/uncheck all those elements, while triggering a change event to execute the handler. As you're using jQuery, here's an example:
$('.checkBoxClass').change(function() {
if (!this.checked)
return;
// place total_select() logic here, and read the parameters from the elements' data()
console.log($(this).data());
});
$('#SelectAll').change(function() {
$('.checkBoxClass').prop('checked', this.checked).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SelectAll" />
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" data-a="1" data-b="0.35" data-c="2700.00" type="checkbox">A
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" data-a="2" data-b="0.35" data-c="2700.00" type="checkbox">B
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" data-a="3" data-b="0.35" data-c="2700.00" type="checkbox">C

I found answer as below, but still any one have any other best solution let me know , thanks
$(document).ready(function () {
$("#SelectAll").click(function(){
$(".checkBoxClass").trigger("click");
$(".checkBoxClass").attr('checked', true);
$(".checkBoxClass").attr('checked', $(this).attr('checked')); //add this line and working proper - hope will help someone
});
});

I know it's not an active thread but I've jost sold a similar problem and I'd like to come out with the solution :D
With this, only those checkboxes will be checked or unchecked and (thus triggered )what have different checked property from #SelectAll.
$(function () {
$('#SelectAll').click(function () {
$('.checkBoxClass').each(function () {
if ($(this).prop('checked') !== $('#SelectAll').prop('checked')) {
$(this).trigger('click');
}
});
});
});
function total_select(id,carat,price){
alert(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ALL
<input type="checkbox" id="SelectAll" />
A
<input class="checkBoxClass" name="pid[]" id="pid_1" value="1" onclick="javascript: total_select(1,0.35,2700.00);" type="checkbox">
B
<input class="checkBoxClass" name="pid[]" id="pid_2" value="2" onclick="javascript: total_select(2,0.35,2700.00);" type="checkbox">
C
<input class="checkBoxClass" name="pid[]" id="pid_3" value="3" onclick="javascript: total_select(3,0.35,2700.00);" type="checkbox">
<div id="result">
</div>

HTML checkbox handling

So I have a group of checkboxes like this:
[x] No stuff
[ ] Stuff 1
[ ] Stuff 2
[ ] Stuff 3
When any of the stuff checkboxes are clicked, I want the "No Stuff" one automatically deselected. Also, I would like everything to be deselected if "No stuff" gets selected.
Can someone point me in the right direction? Thanks.

Give some similar ids to the stuff check boxes - like "chkStuff1", "chkStuff2", "chkStuff3"
and give one onclick function to each like - onclick = "StuffClicked(this);" - same for all.
Lets say, the No Stuff check box has an id - "chkNoStuff"
then try this code -
function StuffClicked(chkBoxObj) {
var isNoStuffChecked = true;
if($('#chkBoxObj').is(':checked')) {
$('#chkNoStuff').prop('checked', false);
}
else {
$('[id^="chkStuff"]').each(function(){
if($(this).is(':checked')) {
isNoStuffChecked = false;
break;
}
});
}
$('#chkNoStuff').prop('checked', isNoStuffChecked );
}
$('#chkNoStuff').unbind('click').bind('click', function(){
$('[id^="chkStuff"]').each(function(){
$(this).prop('checked', false);
});
});
Hope this helps

Fiddle: WORKING DEMO
<label><input type="checkbox" class="jsNoStuff" /> No Stuff</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 1</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 2</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 3</label><br />
<label><input type="checkbox" class="jsStuff" /> Stuff 4</label><br />
<script type="text/javascript">
jQuery(function ($) {
var $jsNoStuff = $('.jsNoStuff');
var $jsStuff = $('.jsStuff');
var fClickStuff = function () {
$jsNoStuff.prop('checked', false);
};
var fClickNoStuff = function () {
if ($jsNoStuff.is(':checked')) {
$jsStuff.prop('checked', false);
}
};
$jsNoStuff.click(fClickNoStuff);
$jsStuff.click(fClickStuff);
});
</script>

Use This
<input type="checkbox" id="all" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />
jquery
jQuery('#all').click(function(){
var that =$(this);
jQuery('.a').each(function(v){
if (that.is(':checked')){
$(this).attr('disabled', true);
}else{
$(this).attr('disabled', false);
}
});
})
click here for see

This should do what you need:
$('input[name="noStuff"]').change(function () {
if ($(this).is(":checked")) $('input[name^="stuff"]').prop('checked', false)
})
$('input[name^="stuff"]').change(function () {
$('input[name="noStuff"]').prop('checked', !$('input[name^="stuff"]:checked').length)
});
jsFiddle example

If you give them all the same class, you can uncheck the first with ordinal 0 when any of the others are clicked.
You can also uncheck/check options by looping through the collection and setting the properties. This is the easy way to check or uncheck multiple options.
How to uncheck a group of checkboxes when another checkbox is checked
Check/Uncheck checkbox with javascript?

Select all checkbox in div

I have following function to select/Deselect all checkbox.
$(function () {
$("#selectall").click(function () {
$('.Employee').attr('checked', this.checked);
});
$(".Employee").click(function () {
if ($(".Employee").length == $(".Employee:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
Its working properly but i am able to select/deselect all for first time on page load, for second time i need to reload the page.Means its not giving multiple time select/deselect functionality.

First problem is that you need to work off of the .prop() method. This reads the javascript checked property. Using the HTML checked attribute works for the first instance but fails for the rest. Next, you need to modify your logic just a little. I've included an example. Observe the javascript functions. Lastly, you should be using the change method or preferably the .on('change', function(){ ... }), but I'll keep my example closer to your original post.
$(function () {
$("#selectall").change(function () {
$('.Employee').prop('checked', this.checked);
});
$(".Employee").change(function () {
if ($(".Employee").length == $(".Employee:checked").length) {
$('#selectall').prop('checked', this.checked);
} else {
$('#selectall').prop('checked', false);
}
});
});
label {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>test 1: <input type="checkbox" class="Employee"></label>
<label>test 2: <input type="checkbox" class="Employee"></label>
<label>test 3: <input type="checkbox" class="Employee"></label>
<label>test 4: <input type="checkbox" class="Employee"></label>
<label>test 5: <input type="checkbox" class="Employee"></label>
</div>
<label>Select All: <input id="selectall" type="checkbox"></label>

Need Help To Uncheck Radio Button If Aleady Checked Using Jquery

i need help to uncheck or check same radio button if button already checked? I have jquery function which is used to enable or disabled other radio buttons if already checked now i want to add some function that use for check or uncheck same radio button?
(function ($) {
$(document).ready(function () {
$('input:radio').click(function(){
var $inputs = $('input:radio')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
});
})(jQuery);
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2
<input type="radio" value="Test1" />Test1
<input type="radio" value="Test2" />Test2

Although it is too late to answer, it could help others
I tried this solution.
Works very well for me!
$("input[type='radio'].myClass").click(function(){
var $self = $(this);
if ($self.attr('checkstate') == 'true')
{
$self.prop('checked', false);
$self.each( function() {
$self.attr('checkstate', 'false');
})
}
else
{
$self.prop('checked', true);
$self.attr('checkstate', 'true');
$("input[type='radio'].myClass:not(:checked)").attr('checkstate', 'false');
}
})

Simply replace disabled with checked:
$input.prop("checked", false);
or for this element:
this.checked = false;
However, if you are looking for form element which can be checked and unchecked, maybe input type="checkbox" /> is what you need.

$inputs.filter(':checked').prop('checked', false);

I think you need checkbox instead of radio button to uncheck the checked :
<input class="checkDisable" type="checkbox" value="Test1" />Test1
<input class="checkDisable" type="checkbox" value="Test2" />Test2
<input class="checkDisable" type="checkbox" value="Test3" />Test3
<input class="checkDisable" type="checkbox" value="Test4" />Test4
(function ($) {
$(document).ready(function () {
$('input:checkbox.checkDisable').change(function(){
var $inputs = $('input:checkbox.checkDisable')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
$(this).prop('checked',false);
}
})
});
})(jQuery);

The answer of Pablo Araya is good, but ...
$self.prop('checked', true);
is superfluous here. The radio button already has a checked state for every click.