How to check if checkbox is checked? - javascript

I have this script where checkbox behave like radio button:
$(".chb").each(function () {
$(this).change(function () {
$(".chb").prop('checked',false);
$(this).prop('checked', true);
});
});
I have this loop in view:
#foreach (var item in Model.Banners)
{
<tr>
<td style="border-right:1px solid white;border-bottom:1px solid white;padding:5px;">#Html.CheckBoxFor(m => m.PayIn.CheckedPayIn, new {id="payin", #class = "chb" })</td>
</tr>
}
How can i check in jquery if and which one is checked?
I tried this but no success:
if ($(this).prop("checked") == false)
{
alert("false");
}

Write an on change event
$('.chb').on('change',function(){
if($(this).is(':checked'))
{
//do something
}
else
{
//do something
}
});

There are multiple options, like with jQuery $(this).prop('checked') or $(this).is(':checked'), with pure js this.checked, in all given snippets, it evaulate to true/false.
$(function() {
var chbs = $('input.chb'); // cache all
chbs.on('change', function(e){
chbs.prop('checked', false); //un-check all
this.checked = true; //check the current
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class='chb' type='checked' />
<input class='chb' type='checked' />
<input class='chb' type='checked' />

Simply do this. No need to use $.each() while you registering the event.
$('.chb').on('change',function(){
$(".chb").prop('checked',false);
$(this).prop('checked', true);
});
But In this scenario, radio button is much recommended than check box.

Try use this
if ($(this).val() == false)
{
alert("false");
}
OR
if ($(this).attr("checked") == "false")
{
alert("false");
}

$(document).ready(function() {
$("#c1").on("change", function() {
if ($("#c1").is(":checked")) {
alert("checked");
} else {
alert("not checked");
}
})
})
try this,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="c1" />

You can simplify your code by skipping your for loop and allowing jQuery to do the work for you:
$(".chb").click(function(){
$(".chb").prop('checked', false); // uncheck all
$(this).prop('checked', true); // check this one you want
});

Related

jQuery if condition for radio button name and value

I have a radio button like
<input type="radio" name="user-type" value="Store">
<input type="radio" name="user-type" value="Brand">
I tried writing jQuery script like
if($("input[name=user-type]:checked").val()) == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
and also tried
if($("input[name=user-type]:checked").val()) == "Brand").click(function(){
$(".showstore").hide();
$(".showbrand").show();
});
and also tried
if ( $("input[name=user-type]:radio").val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
None of these worked, any correction is appreciated. Thanks.
Update1
I tried in this way and this hide both
if($("input[name=user-type]:checked").val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
else if($("input[name=user-type]:checked").val() == "Store"){
$(".showstore").show();
$(".showbrand").hide();
}
Try the following code - it basically listens for click on radio name=user-type, and toggles based on which radio button was clicked.
$(function () {
$('.showstore').hide();
$('.showbrand').hide();
$("input[name=user-type]:radio").click(function () {
if ($('input[name=user-type]:checked').val() == "Brand") {
$('.showstore').hide();
$('.showbrand').show();
} else if ($('input[name=user-type]:checked').val() == "Store") {
$('.showstore').show();
$('.showbrand').hide();
}
});
});
A working fiddle: http://jsfiddle.net/FpUSH/1/
This is short
$('input:radio').change(
function(){
if($(this).val() == 'Store'){
$('.showbrand').hide();
$('.showstore').show();
}
else{
$('.showstore').hide();
$('.showbrand').show();
}
}
);
there are just some syntax errors:
$("input[name='user-type']:checked").each(function(){
if($(this).val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
});
You need to check like this:
if($('input[name="user-type"]:checked').val() === "Brand")
{
alert("Test");
// do something here
}
Working Fiddle Example
You have one syntax error, You have closed the parenthesis belongs to the if statement wrongly
if($("input[name=user-type]:checked").val() == "Brand"){
$(".showstore").hide();
$(".showbrand").show();
}
DEMO
$("input[name=user-type]").change(function(){
$(".showstore").toggle(this.value === "Store");
$(".showbrand").toggle(this.value === "Brand");
});
NEW DEMO
demo try this,
if(jQuery("input:radio[name='user-type']:checked").val()=="Brand"){
//do your stuff
}
Definitely #karthikr has a good and functional approach.
Here it's one example for Yes/No radio-buttons in case you want to disable an element depending if the radio-button selection
$("input[name=button-name]:radio").click(function () {
if ($('input[name=input-radio-name]:checked').val() == "Yes") {
$( "element" ).removeClass('btn-display-none');
$( "element" ).prop('disabled', false);
} else {
$( "element" ).addClass('btn-display-none'));
$( "element" ).prop('disabled', true);
}
});
Source: Used for a own project

Hide and show particular form items on checked and unchecked selectbox?

I am using the below given code to hide and show particular form items, but this doesn't work kindly let me know what I am missing in my code?
HTML:
<input id="id_code_col" type="checkbox" name="code_col"></input>
SCRIPT:
$(document).ready(function(){
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if ($(this).val() == '1') {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
});
N.B: I can not add or remove anything from html. What ever I have to do is to do it with script. Kindly help!
do like this:
if(this.checked)
{
// checked
}
else
{
// unchecked
}
for your case:
$(document).ready(function(){
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if (this.checked) {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
});
selectBox.change(function () {
if ($(this).is(':checked')) {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
You can use .is() along with :checked selector to check whether your checkbox is checked or not, so try to use:
if ($(this).is(':checked')) {
or pure javascript using:
if(this.checked)
instead of:
if ($(this).val() == '1') {
Change this
if ($(this).val() == '1') {
to this
if (this.checked) {
Because you don't have to check for the value to 1, as your checkbox doesn't have any value set to 1.
So you have to check for the state of that checkbox with checked method.
$(document).ready(function () {
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if (this.checked) {
alert("checked");
}
else {
alert("unchecked");
}
});
});
$(function(){
$('#id_code_col').change(function(){
if($(this.checked)){
alert('checked');
}else{
alert('unchecked');
}
});
});

Prevent submit by disabling button until one value is selected

How can I (I guess a solution is to ) disable my submit button until at least one value is selected or typed?
<form name="forma" method="POST" action="used-results.php" id="apliforma">
lots of textboxes and dropdown menus
<a onclick="forma.submit();" class="btn btn-primary">Search</a>
</form>
You have add a listener to change event and check for values
$(document).ready(function (){
validate();
// In case of validating specific fields
$('#name, #email').change(validate);
});
function validate(e){
if ( $('#name').val().length > 0 && $('#email').val().length > 0 ) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', true);
}
}
Please check this one which has the dropdown too
JSFIDDLE
$(document).ready(function (){
validate();
$('input,select').change(validate);
});
function validate(e){
var validation = true;
$('input , select').each(function(){
if($(this).val()=="")
{
validation = false;
}
});
if ( validation ) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', true);
}
}
Yes, this can be done like this.
function ready(){
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', function (e) {
document.getElementById('submit').disabled = e.target.value === "" }, false);
}
}
document.addEventListener( "DOMContentLoaded", ready, false )
You'll have to add the following tags to your submit button id='submit' disabled='disabled'.
Cheers.

disable link if checkbox s unchecked

I want to disable link if user uncheck the checkbox.
tried something like:
$('#check1').click(function() {
if(!$(this).is(':checked')){
$('#tet1').bind('click', function(){ return false; });
}else{
$('#tet1').unbind('click');
}
});
but it did not work. http://jsfiddle.net/LX7wH/
Why this is not working for me? where i'm wrong?
Thank you!
You don't need to do anything when the checkbox is changed, just check if it's checked within an event handler for the anchor, and if it is checked, prevent the default action.
$('#tet1').on('click', function(e) {
if ( $('#check1').is(':checked') ) e.preventDefault();
});
Try,
var xEnabled = true;
$('#check1').click(function() {
xEnabled = $(this).is(':checked');
});
$('#tet1').click(function(){
if(!xEnabled) { return false; }
})
DEMO
I believe this is what you are after:
Google
<input type="checkbox" id="checkBox" />
$("a").click(function(e) {
if($("#checkBox").prop("checked") === true) {
e.preventDefault();
return false;
} else {
return true;
};
});
This will stop all links working however you can change the "a" selector to what ever you want.
http://jsfiddle.net/KDZDE/

jQuery: Check if button is clicked

I have two buttons in a form and want to check which one was clicked.
Everything works fine with radioButtons:
if($("input[#name='class']:checked").val() == 'A')
On simple submit button everything crash.
Thanks!
$('#submit1, #submit2').click(function () {
if (this.id == 'submit1') {
alert('Submit 1 clicked');
}
else if (this.id == 'submit2') {
alert('Submit 2 clicked');
}
});
You can use this:
$("#id").click(function()
{
$(this).data('clicked', true);
});
Now check it via an if statement:
if($("#id").data('clicked'))
{
// code here
}
For more information you can visit the jQuery website on the .data() function.
jQuery(':button').click(function () {
if (this.id == 'button1') {
alert('Button 1 was clicked');
}
else if (this.id == 'button2') {
alert('Button 2 was clicked');
}
});
EDIT:- This will work for all buttons.
$('input[type="button"]').click(function (e) {
if (e.target) {
alert(e.target.id + ' clicked');
}
});
you should tweak this a little (eg. use a name in stead of an id to alert), but this way you have more generic function.
$('#btn1, #btn2').click(function() {
let clickedButton = $(this).attr('id');
console.log(clickedButton);
});
try something like :
var focusout = false;
$("#Button1").click(function () {
if (focusout == true) {
focusout = false;
return;
}
else {
GetInfo();
}
});
$("#Text1").focusout(function () {
focusout = true;
GetInfo();
});

Categories

Resources