我想要复选框中的单选按钮功能,该复选框也是切换..?

时间:2017-04-21 10:26:02

标签: javascript jquery html checkbox radio-button

这是CheckBox代码

<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 checked.now我是第二个复选框def检查时间abc unchecked.and现在再次点击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>

2 个答案:

答案 0 :(得分:1)

请尝试以下代码。
我已为两个复选框添加了无线电类,以选中所有需要单选按钮功能的复选框。

&#13;
&#13;
$(document).ready(function() {
  $(".radio").click(function() {
    var isChecked = this.checked;
    if (isChecked) {
      $(".radio").prop("checked", false);
      $(this).prop("checked", true);
    }
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

希望这会对你有所帮助。

答案 1 :(得分:0)

&#13;
&#13;
var
&#13;
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);
});
&#13;
&#13;
&#13;