0

我的问题如下：

我用这个 IMG / CSS / jQuery 代码在我的网站上设置了我的复选框

有趣的部分是：

<script type="text/javascript">
    $(document).ready(function() {
      // Iterate over checkboxes
      $("input[type=checkbox].switch").each(function() {
        // Insert mark-up for switch
        $(this).before(
          '<span class="switch">' +
          '<span class="mask" /><span class="background" />' +
          '</span>'
        );
        // Hide checkbox
        $(this).hide();
        // Set inital state
        if (!$(this)[0].checked) {
          $(this).prev().find(".background").css({left: "-56px"});
        }
      }); // End each()

      // Toggle switch when clicked
      $("span.switch").click(function() {
        // If on, slide switch off
        if ($(this).next()[0].checked) {
          $(this).find(".background").animate({left: "-56px"}, 200);

        // Otherwise, slide switch on
        } else {
          $(this).find(".background").animate({left: "0px"}, 200);
        }
        // Toggle state of checkbox
        $(this).next()[0].checked = !$(this).next()[0].checked;
      });
    }); // End ready()

</script>

现在我想访问：

<input type="checkbox" id="light2" class="switch">

如何使用 JavaScript 处理 ID 标签？

我试过这样的事情：

<script>
    $(document).ready(function(){
        $("span.switch + #light2").click(function(){
            if($(this).next()[0].checked)
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });
    });
</script>

感谢您的任何提示

4

3 回答 3

1 
   $(document).ready(function(){
        $("#light2").click(function(){
            if($("#light2").is(":checked"))
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });
    });

工作示例：http: //jsfiddle.net/bA2fX/

于 2013-02-03T23:22:23.327 回答
0

感谢 ClarkeyBoy，解决方案是：

<script>
    $(document).ready(function(){
        $("#light2").prev("span.switch").click(function() {
            if($("#light2").attr("checked"))
            {
                alert('checked');
            }
            else
            {
                 alert('unchecked');
            }
        });
    });

</script>
于 2013-02-04T10:56:56.433 回答
0

如果您的意图是为每个 .switched 元素设置样式，则应该通过 CSS 来实现。

如果您的需求更复杂，那么您可以通过使用 选择每个.switch类元素来实现$('.switch')。例如：

$('.switch').css('color', 'red');

相反，要选择具有 ID 的特定元素（因为它必须是唯一的），您可以简单地使用$('#light2'). 例如：

$('#light1').on( 'click', function( evt ) {
    evt.preventDefault();
    if ($(this).is(':checked')) {
        /* your AJAX code */
    }
});

$('#light2').on( 'click', function( evt ) {
    evt.preventDefault();
    if ($(this).is(':checked')) {
        /* your AJAX code */
    }
});

但是，由于您的部分代码是在运行时由 jQuery 创建的，因此您必须在伪事件结束时设置样式并附加事件（好吧，最后您也可以委托onDomReady） ，否则您的代码将找不到请求的元素。

于 2013-02-03T23:46:34.447 回答