我想要复选框中的单选按钮功能，并且该复选框也是切换..？答案

【问题标题】：i want radio button functionality in checkbox and that checkbox is also toggle..?我想要复选框中的单选按钮功能，并且该复选框也是切换..？
【发布时间】：2017-04-21 19:33:05
【问题描述】：

这是复选框代码

<input type="checkbox" class="ascsection radio" id="checkbox-choice-t-6a" value="" />
<label for="checkbox-choice-t-6a" style="border: 1px solid #2d5f7c;width:90px;border-bottom-left-radius:4px;border-top-left-radius:4px;font-family:SertoJerusalem;">Abc</label>

<input type="checkbox" class="ascsyriac radio" id="checkbox-choice-t-6b" value="" />
<label for="checkbox-choice-t-6b" style="border: 1px solid #2d5f7c;width:90px;border-bottom-right-radius:4px;border-top-right-radius:4px;font-family:SertoJerusalem;">ܐ ܒ</label>

我想要这两个复选框中的单选按钮功能，也可以切换。

意味着我第一次加载页面时我的两个复选框未选中。然后我检查了一个 checkboc abc。现在我是第二个复选框 def 检查了那个时间 abc 未选中。现在再次单击 def 然后 def 复选框未选中。

提前致谢...

生成这个类型类

    <div class="ui-checkbox">
<input id="checkbox-choice-t-6a" class="ascsection radio" name="checkbox-choice-t-61" value="" type="checkbox">
<label class="ui-checkbox-off ui-btn ui-btn-up-c ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-first-child" for="checkbox-choice-t-6a" style="border: 1px solid #2d5f7c;width:90px;border-bottom-left-radius:4px;border-top-left-radius:4px;font-family:SertoJerusalem;" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="false">
<span class="ui-btn-inner">
<span class="ui-btn-text">Abc</span>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span>
</span>
</label>
</div>

【问题讨论】：

“请做” - 嗯……你尝试的时候卡在哪里了？也许从绑定到两个复选框的change 或click 事件处理程序开始，然后...关于您的标记，如果两个复选框具有相同的类作为分组方式不是更有意义吗？
这是我的复选框切换，但任何时候选中一个复选框，然后单击另一个复选框，第一个复选框未选中，所以请帮助
我想要复选框，但要切换，如果有任何一个被选中，然后单击另一个删除首先签入，然后单击选中的 chckbox，而不是删除选中该复选框了解..？
@A.Lau 但我想要两个功能 1-切换复选框和 2-单选按钮功能。请帮助我并正确阅读我的问题
我试过了。如果选中一个复选框，然后单击另一个复选框，则删除 ui-checkbox-off、ui-icon-checkbox-on、ui-btn-active 但不工作所以帮助我

标签： javascript jquery html checkbox radio-button

【解决方案1】：

请尝试以下代码。
我为两个复选框添加了单选类，以选择所有需要单选按钮功能的复选框。

$(document).ready(function() {
  $(".radio").click(function() {
    var isChecked = this.checked;
    if (isChecked) {
      $(".radio").prop("checked", false);
      $(this).prop("checked", true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" class="abc radio" id="chkbox1" value="" />
<label for="chkbox1" style="border: 1px solid #2d5f7c;width:90px;border-bottom-left-radius:4px;border-top-left-radius:4px;font-family:SertoJerusalem;">Abc</label>
<input type="checkbox" class="def radio" id="chkbox2" value="" />
<label for="chkbox2" style="border: 1px solid #2d5f7c;width:90px;border-bottom-right-radius:4px;border-top-right-radius:4px;font-family:SertoJerusalem;">Def</label>

希望这会对你有所帮助。

【讨论】：

$(this).prop("checked") 是this.checked 的复杂表达方式。如果您只取消选中 other 那些，则不需要 $(this).prop("checked", true) 在 if...
@nnnnnn $(this).prop("checked") 和 this.checked 都给出相同的值。首先我取消了所有复选框，所以它也取消了当前复选框。然后只有我手动检查了当前复选框。
"$(this).prop("checked") 和 this.checked 都给出相同的值。" - 我知道。这就是我已经说过的。但是this.checked 更短、更高效、更易于阅读。
@nnnnnn 是的。现在我更新我的代码。感谢您的信息。
@balachandar 此代码在我的项目中不起作用，因为我的复选框是在我的项目中生成自动 ui-checkbox 类

【解决方案2】：

var $ckb = $(".ckb"); // yes, add a .ckb to your checkboxes.

$ckb.on("change", function() {
  $ckb.not(this).prop("checked", !this.checked && $ckb.filter(":checked").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="chkbox1" value="a" class="ckb abc" />
<label for="chkbox1">A</label>

<input type="checkbox" id="chkbox2" value="b" class="ckb def" />
<label for="chkbox2">B</label>

【讨论】：