只选中一个复选框并取消选中其他复选框

时间:2015-04-16 13:20:36

标签: jquery onsen-ui

我试图只检查一个复选框,而其他人取消选中,但是当我想检查新的chekcbox时,那么pervious将取消选中,等等。

我试过这段代码:

JS档案

$('input[type="checkbox"]').click(function() {
$(".check_class").attr("checked", false);
$(this).attr("checked", true);    
});

HTML文件

    <ons-list-header>Takistused</ons-list-header>
    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        vihmaveerenn
      </label>
    </ons-list-item>
    <ons-list-item modifier="tappable">
      <label class="checkbox checkbox--noborder checkbox--list-item" id="test">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark" ></div>
        äärekivi
      </label>
    </ons-list-item>
    <ons-list-item modifier="tappable" >
      <label class="checkbox checkbox--noborder checkbox--list-item" id="test1">
        <input type="checkbox" id="example">
        <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
        munakivi tee
      </label>
    </ons-list-item>
  </ons-list>

我做错了什么?我尝试了不同的方法,但它不会在现场使用。

4 个答案:

答案 0 :(得分:5)

尝试下面的.not(this)

$(document).on('click', 'input[type="checkbox"]', function() {      
    $('input[type="checkbox"]').not(this).prop('checked', false);      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="one" />
<input type="checkbox" id="two" />
<input type="checkbox" id="three" />
<input type="checkbox" id="four" />

答案 1 :(得分:3)

你应该真正使用单选按钮来实现这种功能,但是你可以简单地从not的一组匹配中排除一个项目,如下所示:

$('input[type="checkbox"]').click(function() {
   $('input[type="checkbox"]').not(this).prop("checked", false);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/4n2e31oq/

请注意,对prop等特定属性,您需要使用attr而不是checked

您可以通过缓存选中的复选框来提高效率:

var $checks = $('input[type="checkbox"]');
$checks.click(function() {
   $checks.not(this).prop("checked", false);
});

http://jsfiddle.net/TrueBlueAussie/4n2e31oq/1/

答案 2 :(得分:0)

 $(function () {
        $('input[type=checkbox]').click(function () {
             var chkBox = document.getElementById('<%= chkBranchRoleTransaction.ClientID %>');
            var chks = chkBox.getElementsByTagName('INPUT');
             for (i = 0; i < chks.length; i++) {
                 chks[i].checked = false;
             }
             $(this)[0].checked = true;
         });
    });

答案 3 :(得分:0)

如果要使用类进行此操作。您已经添加了类并删除了当前元素之外的内容。

jQuery(document).on('click', '.esg-filterbutton', function() { 
    jQuery(this).addClass('selected');     
    jQuery('.esg-filterbutton').not(this).removeClass('selected');  
});