【问题标题】:jquery checkbox checked toggle when click of a button单击按钮时jquery复选框选中切换
【发布时间】:2016-02-02 11:38:47
【问题描述】:

我想在点击按钮时切换复选框。

这是我的 jQuery

$("#choose_address2").on("click", function () { 
   console.log("click!!! address2");
   var $checkbox = $(this).find(':checkbox');
   var checkBoxes = $("input[name=checkbox]]");
   checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});

这是我的输入

<span id="choose_address2" class="btn btn-info">
<i class="fa fa-plus-circle"></i>เพิ่มที่อยู่
<input type="checkbox" name="choose_address" {{#if customer.addresses}}checked{{/if}} id="choose_address1" hidden>
</input></span>

默认情况下,该按钮处于选中状态。 但是,当我单击 ID 为 choose_address2 的跨度时,我想更改状态。任何建议都将受到高度赞赏。

【问题讨论】:

  • 试试这个:$checkbox.prop("checked", !$checkbox.prop("checked"));

标签: javascript jquery html checkbox


【解决方案1】:

试试这个

$("#choose_address2").on("click", function () { 
   console.log("click!!! address2");
   var $checkbox = $(this).find(':checkbox');
   var checkBoxes = $("input[type='checkbox']");
   if(checkBoxes.prop("checked")==true)
     checkBoxes.prop("checked", false); 
   else
     checkBoxes.prop("checked", true)
});

或者这也有效

$("#choose_address2").on("click", function () { 
   console.log("click!!! address2");
   var $checkbox = $(this).find(':checkbox');
   var checkBoxes = $("input[type='checkbox']");
   (checkBoxes.prop("checked")==true)?checkBoxes.prop("checked", false):checkBoxes.prop("checked", true);       

});

【讨论】:

    【解决方案2】:

    举个例子

    HTML

    <input type="checkbox" class="toggle" checked>
    <input type="checkbox" class="toggle">
    <button id="choose_address2">
     Toggle checkbox
    </button>
    

    JQ

    $('#choose_address2').click(function(){
       $('.toggle').each(function(){
         $(this).prop('checked', !$(this)[0].checked);
      })
    })
    

    演示 http://jsfiddle.net/mPstq/94/

    【讨论】:

      【解决方案3】:

      解决这个问题的最简单方法:

      $checkbox.prop( 'checked', ! $checkbox.is( ':checked' ) );
      

      【讨论】:

        【解决方案4】:
        $("#choose_address2").on("click", function() {
             var $checkbox = $(this).find(':checkbox');
             $checkbox.prop("checked", !$checkbox.prop("checked"));
        });
        

        【讨论】:

          【解决方案5】:

          谢谢大家的建议..

          这对我有用:

          $("#choose_address2").click(function(){
             var checkBox = $("#choose_address1");
             console.log("click!!! address2");
             checkBox.trigger('click');
          });
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2011-11-10
            • 2012-05-13
            • 1970-01-01
            • 1970-01-01
            • 2012-11-09
            • 2020-05-20
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多