【问题标题】:How to uncheck checkbox using jQuery Uniform library如何使用 jQuery Uniform 库取消选中复选框
【发布时间】:2011-06-27 04:27:48
【问题描述】:

我在取消选中 checkbox 时遇到问题。看看我正在尝试的my jsFiddle

   $("#check2").attr("checked", true);

我使用uniform 来设置checkbox 的样式,但它根本无法选中/取消选中 checkbox

有什么想法吗?

【问题讨论】:

  • google chrome 和 firefox 都不适合我

标签: jquery checkbox


【解决方案1】:

一个更简单的解决方案是这样做而不是使用统一:

$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1

这不会触发任何定义的点击动作。

你也可以使用:

$('#check1').click(); // 

这将切换复选框的选中/取消选中,但这也会触发您定义的任何点击操作。所以要小心。

编辑:jQuery 1.6+ 使用prop() 而不是attr() 复选框检查值

【讨论】:

  • 这让我在 jQuery 1.7.1 中保留了选中的属性。有效,但没有做你认为应该做的事。
【解决方案2】:

查看他们的文档,他们有一个 $.uniform.update 功能来刷新“统一”元素。

示例: http://jsfiddle.net/r87NH/4/

$("input:checkbox").uniform();

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});

【讨论】:

  • @mkoryak:在1.4.4 中工作正常,但 js 和 css 文件的链接已损坏。 Here's an updated fiddle. 如果你的意思是它会在1.6 中出现问题,那么这可能是真的,因为 jQuery 改变了然后恢复了 .attr() 的行为。使用1.6 或更高版本,您应该真正使用.prop()
  • 我可以看到更新的 jsFiddle 和原来的完全没有区别(直到复选框 2 的错误标签),除了更新的版本对我有用,而原来的没有!?! ?
  • 顺便说一句,所有这些像素绘制的统一形式在 Retina 上看起来都非常不性感
  • 对我不起作用,jsfiddle 也不起作用或令人困惑
【解决方案3】:
$("#chkBox").attr('checked', false); 

这对我有用,这将取消选中该复选框。 同样的方式我们可以使用

$("#chkBox").attr('checked', true); 

选中复选框。

【讨论】:

  • 我认为使用 .prop() 函数而不是 .attr() 会更好。否则它不会总是按预期工作......
【解决方案4】:

如果您使用的是uniform 1.5,那么使用这个简单的技巧来添加或删除 check 的属性
只需在复选框的输入字段中添加 value="check"。
将此代码添加到 uniform.js > @ 987654324@ > .click(function(){

if ( $(elem+':checked').val() == 'check' ) {
    $(elem).attr('checked','checked');           
}
else {
    $(elem).removeAttr('checked');
}   

如果您不想在输入框中添加 value="check",因为在某些情况下您会添加两个复选框,因此请使用此

if ($(elem).is(':checked')) {
 $(elem).attr('checked','checked');
}    
else
{    
 $(elem).removeAttr('checked');
}

如果您使用的是uniform 2.0,那么使用这个简单的技巧在classUpdateChecked($tag, $el, options) { 函数更改中添加或删除检查属性

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
}

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
    if (isChecked) {
        $el.attr(c, c);
    } else {
        $el.removeAttr(c);
    }

}

【讨论】:

    【解决方案5】:
    $('#check1').prop('checked', true).uniform(); 
    $('#check1').prop('checked', false).uniform(); 
    

    这对我有用。

    【讨论】:

    • 非常感谢。我可以确认这是最简单的解决方案。
    【解决方案6】:

    这样做:

    $('#checkbox').prop('checked',true).uniform('refresh');
    

    【讨论】:

      【解决方案7】:

      如果您使用文档中提到的 javascript 更新元素,则需要调用 $.uniform.update()

      【讨论】:

        【解决方案8】:

        首先,checked 的值可以是checked,也可以是一个空字符串。

        $("input:checkbox").uniform();
        
        $('#check1').live('click', function() {
            $('#check2').attr('checked', 'checked').uniform();
        });
        

        【讨论】:

        • 将布尔值作为checked 的值传递并没有错。
        • 但是我们不是在编写 HTML 标记。我们在HTMLInputElement 上设置一个属性。查看checked 属性。
        • 没关系……我也不明白为什么它无效……
        • 仅在 1.6+ 中支持传递布尔值,在此之前您必须将选中的属性设置为“已选中”或将其删除。
        【解决方案9】:

        在某些情况下你可以使用这个:

        $('.myInput').get(0).checked = true
        

        对于切换,您可以使用 if else with function

        【讨论】:

          【解决方案10】:

           $("#checkall").change(function () {
                      var checked = $(this).is(':checked');
                      if (checked) {
                          $(".custom-checkbox").each(function () {
                              $(this).prop("checked", true).uniform();
                          });
                      } else {
                          $(".custom-checkbox").each(function () {
                              $(this).prop("checked", false).uniform();
                          });
                      }
                  });
          
                  // Changing state of CheckAll custom-checkbox
                  $(".custom-checkbox").click(function () {
                      if ($(".custom-checkbox").length == $(".custom-checkbox:checked").length) {
                          $("#chk-all").prop("checked", true).uniform();
                      } else {
                          $("#chk-all").removeAttr("checked").uniform();
                      }
                  });
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <input type="checkbox" id='checkall' /> Select All<br/>
           <input type="checkbox" class='custom-checkbox' name="languages" value="PHP"> PHP<br/>
           <input type="checkbox" class='custom-checkbox' name="languages" value="AngularJS"> AngularJS<br/>
           <input type="checkbox" class='custom-checkbox' name="languages" value="Python"> Python<br/>
           <input type="checkbox" class='custom-checkbox' name="languages" value="Java"> Java<br/>

          【讨论】:

            【解决方案11】:

            另一种方法是,

            使用$('#check2').click();

            这会导致统一检查复选框并更新它的掩码

            【讨论】:

              【解决方案12】:

              复选框,类似于收音机 btn

              $(".checkgroup").live('change',function() { var previous=this.checked; $(".checkgroup).attr("checked", false); $(this).attr("checked", previous); });

              【讨论】:

                猜你喜欢
                • 2011-10-02
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2014-02-11
                • 2012-06-27
                • 2013-09-09
                • 2013-08-04
                相关资源
                最近更新 更多