CODEWITHSUNDEEP
javascriptjquery
Jess McKenzie
Jess McKenzie

Reputation: 8385

Checking a var is checked

In my case my checkboxes are not ticked by default so when the checkbox var html is ticked I would like it to show the alert.

Is there anyway that this can be done via a variable/use of #id or do I have to do something along the lines of ($('.checkbox_check').is(':checked'))?

I am just trying not to bloat my code if possible.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>E-mail Sig Generator</title>
      <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
rel="stylesheet">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
$(document).ready(function() {

        var name     = $('#name').val();
        var position = $('#position').val();
        var phone    = $('#phone').val();
        var email    = $('#email').val();
        var address  = $('#address').val();
        var facebook = $('#facebook').val();
        var website  = $('#website').val();
        var html     = $('#showInline');
        var file     = $('#html');

        if(html)
        {
            alert("muppets");

        }
    });
    </script>
</head>

<body style="background:#000;">
    <div style="width:980px; margin-left:auto; margin-right:auto;">
        <table border="0" cellpadding="0" cellspacing="0" width="980px">
            <tr>
                <td style="text-align:center; background:#000;"></td>
            </tr>
        </table>
    </div>

    <div style=
    "width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
    <form class="form-group" id="email" method="post" name="email" style=
    "width:380px; padding:20px;">
            <div class="form-group">
                <label for="name">Name</label> <input class="form-control" id=
                "name" type="text">
            </div>

            <div class="form-group">
                <label for="position">Position</label> <input class=
                "form-control" id="position" type="text">
            </div>

            <div class="form-group">
                <label for="phone">Phone</label> <input class="form-control"
                id="phone" type="tel">
            </div>

            <div class="form-group">
                <label for="email">E-Mail</label> <input class="form-control"
                id="email" type="email">
            </div>

            <div class="form-group">
                <label for="address">Address</label> <input class=
                "form-control" id="address" type="text">
            </div>

            <div class="form-group">
                <label for="facebook">Facebook</label> <input class=
                "form-control" id="facebook" type="text">
            </div>

            <div class="form-group">
                <label for="website">Website</label> <input class=
                "form-control" id="website" type="text">
            </div>

            <div class="form-group">
                <div class="checkbox">
                    <label><input id="html" type="checkbox" value="">
                    <strong>Download as a HTML file</strong></label>
                </div>
            </div>

            <div class="form-group">
                <label><input id="showInline" type="checkbox" value="">
                <strong>Show as HTML Code</strong></label>
            </div>
        </form>

        <div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
            <textarea id="showInlineHTML" readonly="readonly">
</textarea>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 166

Answers (7)

duatis
duatis

Reputation: 184

I want to make you notice that you may have an scope issue with the html variable, as it is declared inside the closure of the function called on document ready. So once the function is executed the variable "disappears". One solution might be declare the variables you want to initialize as global vars, meaning outside any function declaration.

var html; //declare as global

$(document).ready(function() {

    var name     = $('#name').val();
    var position = $('#position').val();
    var phone    = $('#phone').val();
    var email    = $('#email').val();
    var address  = $('#address').val();
    var facebook = $('#facebook').val();
    var website  = $('#website').val();
    var file     = $('#html');

    html = $('#showInline'); //initialize

    if(html)
    {
        alert("muppets");
    }

});

Although it is not a very elegant solution. You may think of using a class and initialize a instance on your document ready callback.

Upvotes: 0

Praveen Raj
Praveen Raj

Reputation: 1014

Try this

if(html.prop('checked')){
  alert('Do something');
}

Upvotes: 0

Brownman Revival
Brownman Revival

Reputation: 3850

$(document).on('click', '#showInline', function() {
if (html.get(0).checked) {
    alert('Checked')
  }
    });

HERE

Upvotes: 0

JB Cloud
JB Cloud

Reputation: 7

First I suggest you to change jquery and bootstrap library sequence on page. Please follow below code.

<!DOCTYPE html>
<html>
<head>
    <title>E-mail Sig Generator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
    type="text/javascript"></script>
    <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
    rel="stylesheet">
    <link href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
    rel="stylesheet">


    <script>
$(document).ready(function() {

        var name     = $('#name').val();
        var position = $('#position').val();
        var phone    = $('#phone').val();
        var email    = $('#email').val();
        var address  = $('#address').val();
        var facebook = $('#facebook').val();
        var website  = $('#website').val();
        var html     = $('#showInline');
        var file     = $('#html');

        $("input[type='checkbox']").on("click",function() {
         alert("muppets");
        });
    });
    </script>
</head>

<body style="background:#000;">
    <div style="width:980px; margin-left:auto; margin-right:auto;">
        <table border="0" cellpadding="0" cellspacing="0" width="980px">
            <tr>
                <td style="text-align:center; background:#000;"></td>
            </tr>
        </table>
    </div>

    <div style=
    "width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
    <form class="form-group" id="email" method="post" name="email" style=
    "width:380px; padding:20px;">
            <div class="form-group">
                <label for="name">Name</label> <input class="form-control" id=
                "name" type="text">
            </div>

            <div class="form-group">
                <label for="position">Position</label> <input class=
                "form-control" id="position" type="text">
            </div>

            <div class="form-group">
                <label for="phone">Phone</label> <input class="form-control"
                id="phone" type="tel">
            </div>

            <div class="form-group">
                <label for="email">E-Mail</label> <input class="form-control"
                id="email" type="email">
            </div>

            <div class="form-group">
                <label for="address">Address</label> <input class=
                "form-control" id="address" type="text">
            </div>

            <div class="form-group">
                <label for="facebook">Facebook</label> <input class=
                "form-control" id="facebook" type="text">
            </div>

            <div class="form-group">
                <label for="website">Website</label> <input class=
                "form-control" id="website" type="text">
            </div>

            <div class="form-group">
                <div class="checkbox">
                    <label><input id="html" type="checkbox" value="">
                    <strong>Download as a HTML file</strong></label>
                </div>
            </div>

            <div class="form-group">
                <label><input id="showInline" type="checkbox" value="">
                <strong>Show as HTML Code</strong></label>
            </div>
        </form>

        <div id="inlineDIV" onchange="showInlineDIV()" style="display:none;">
            <textarea id="showInlineHTML" readonly="readonly">
</textarea>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Mayank
Mayank

Reputation: 1392

For that you have to attach event delegate to jquery .change() event

$(document).ready(function(){
        var html     = $('#showInline');
        html.change(function() {
                        alert("muppets : "+ $(this).is(":checked"));    
        });
});

Try the FIDDLE.

Hope this helps..

Upvotes: 2

rrk
rrk

Reputation: 15846

$(document).ready(function() {
  var html = $('#showInline');
  if (html.prop('checked')) {
    alert("muppets");

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="width:980px;margin-left:auto;margin-right:auto;border-radius:25px;background-color: #ffffff;">
  <form class="form-group" id="email" method="post" name="email" style="width:380px; padding:20px;">
    <div class="form-group">
      <label>
        <input id="showInline" type="checkbox" value="" checked>
        <strong>Show as HTML Code</strong>
      </label>
    </div>
  </form>
</div>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use the var html directly as it is a valid jquery object. Use below code -

if(html.is(':checked'))
{
   alert("muppets");
}

Upvotes: 1

Related Questions