Question

在我的情况下，默认情况下我的复选框没有勾选，因此当勾选复选框var html时，我希望它显示警告。

无论如何，这可以通过#id的变量/使用来完成，还是我必须按照($('.checkbox_check').is(':checked'))的方式做一些事情？

我只是想尽可能不膨胀我的代码。

代码：

<!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>

Answer 1

为此，您必须将事件委托附加到jquery .change()事件

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

尝试FIDDLE。

希望这会有所帮助..

Answer 2

您可以直接使用var html，因为它是一个有效的jquery对象。使用下面的代码 -

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

Answer 3

Build Path>> add external jar

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

Answer 4

首先，我建议您在页面上更改jquery和bootstrap库序列。请遵循以下代码。

<!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>

Answer 5

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

HERE

Answer 6

试试这个

Image = "data:image/png;base64," + Convert.ToBase64String(Serialize(rdr["image"]))

Answer 7

我想让你注意到你可能对html变量有一个范围问题，因为它是在文件就绪的函数的闭包内声明的。因此，一旦执行该函数，变量“消失”。一种解决方案可能是将要初始化的变量声明为全局变量，这意味着在任何函数声明之外。

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");
    }

});

虽然它不是一个非常优雅的解决方案。您可以考虑使用类并在文档就绪回调中初始化实例。

检查var是否已检查

7 个答案: