类开关的地址复选框，但仅带有 id light2

Adress checkbox of class switch but only with the id light2

本文关键字：id light2 开关 地址 复选框      更新时间：2023-09-26

我的问题是：

我在我的网站上用这个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>

感谢您的任何提示

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

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

如果你的目的是为每个.switch元素设置样式，你应该通过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伪事件的末尾设置样式并附加事件（好吧，对于最后一个事件，您也可以委托），否则您的代码将找不到请求的元素。

感谢 ClarkeyBoy，解决方案是：

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