像单选按钮一样的复选框,仅限于一个选择,取消选中是不是选中了其他复选框

Posted

技术标签:

【中文标题】像单选按钮一样的复选框,仅限于一个选择,取消选中是不是选中了其他复选框【英文标题】:Checkbox like radio button, limit to only one selection, uncheck if other checkbox is checked像单选按钮一样的复选框,仅限于一个选择,取消选中是否选中了其他复选框 【发布时间】:2021-04-26 19:09:42 【问题描述】:

当前的 js 工作正常,但目前可以选择多个复选框。但是,我只想将选择限制为一个复选框,以便复选框的行为类似于单选按钮 - 如果选中一个,则另一个未选中,并且只允许一个复选框:

JS代码:

/* * * * * * * * * * * * * * * * * *
* Show/hide fields conditionally
* * * * * * * * * * * * * * * * * */
(function($) 
$.fn.conditionize = function(options) 
  
   var settings = $.extend(
      hideJS: true
  , options );
  
  $.fn.showOrHide = function(listenTo, listenFor, $section) 
    if ($(listenTo).is('select, input[type=text]') && $(listenTo).val() == listenFor ) 
      $section.slideDown();
    
    else if ($(listenTo + ":checked").val() == listenFor) 
      $section.slideDown();
    
    else 
      $section.slideUp();
    
   

  return this.each( function() 
    var listenTo = "[name=" + $(this).data('cond-option') + "]";
    var listenFor = $(this).data('cond-value');
    var $section = $(this);

    //Set up event listener
    $(listenTo).on('change', function() 
      $.fn.showOrHide(listenTo, listenFor, $section);
    );
    //If setting was chosen, hide everything first...
    if (settings.hideJS) 
      $(this).hide();
    
    //Show based on current value on page load
    $.fn.showOrHide(listenTo, listenFor, $section);
  );

(jQuery));

$('.conditional').conditionize();

这里是html代码:

<div id="demo">
  <h3>I'm interested in</h3>
  <label class="solo"><input type="radio" name="example1" value="private"><span></span>
    <span class="label-icon"><i class="fas fa-users"></i> Solo/Private Lessons</span>
  </label>
  <label class="group"><input type="radio" name="example1" value="group"><span></span>
    <span class="label-icon"><i class="fas fa-users"></i> Group Lessons</span>
  </label>
    <label class="workshop"><input type="radio" name="example1" value="workshop"><span></span>
      <span class="label-icon"><i class="fas fa-guitar"></i> Workshops and Clinics</span>
    </label>

  <div class="conditional" data-cond-option="example1" data-cond-value="private">
    <h4>Which instruments are you interested in learning?</h4>
    <label><input type="checkbox" name="guitar"><span></span> Guitar</label>
    <label><input type="checkbox" name="drums"><span></span> Drums</label>
      <label><input type="checkbox" name="violin"><span></span> Violin</label>
      <label><input type="checkbox" name="example3"><span></span> Bass</label>
      <label><input type="checkbox" name="example3"><span></span> Flute</label>
      <label><input type="checkbox" name="example3"><span></span> Saxophone</label>
      <label><input type="checkbox" name="example3"><span></span> Other</label>


      <div class="years-of-experience">
    <div class="conditional inline" data-cond-option="guitar" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in guitar</label>
    </div>
    <div class="conditional" data-cond-option="drums" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in drums</label>
    </div>
    <div class="conditional" data-cond-option="violin" data-cond-value="on">
      <label><input type="text" size="4"> &nbsp; Years of experience in violin</label>
    </div>
  </div>

      <div class="student-profile">
        <h4>Tell us a little more about yourself:</h4>
        <!-- Name -->
        <div>
          Student name<br>
            <input type="text" value="First"> <input type="text" value="Last">
        </div>
        <div>
          <label>Age<br>
            <span class="explanation">Currently accepting students 5+</span>
            <input type="text"></label>
        </div>
        <div>
          <label>Parent/guardian name
            <span class="explanation">If student is a minor</span>
             <input type="text" value="First"> <input type="text" value="Last">
        </div>
        <div>
          <label>Occupation
            <span class="explanation">If student, list school</span>
             <input type="text"></label>
        </div>
      </div><!-- /.student-profile -->
      <input type="submit" class="big-blue-button" value="Let's take a look at the class contract &rarr;">
  </div><!-- .solo-classes -->

  <div class="conditional" data-cond-option="example1" data-cond-value="group">
    <p>What kind of group lessons are you interested in?</p>
  </div>

  <div class="conditional" data-cond-option="example1" data-cond-value="workshop">
    <p>What kind of workshops are you interested in?</p>
  </div>

</div>

【问题讨论】:

你有什么问题? 如何将复选框选择限制为 1 ?目前您可以选择多个复选框,但我想这样做,以便只允许选择 1 个复选框。一个 d 如果你选择了另一个,它会切换,就像单选按钮一样 @Reporter jsfiddle.net/44Zfv/724这是我正在寻找的复选框行为,但我不知道如何将此js代码sn-p正确合并到我发布的js代码中 用户倾向于接受既定的 UI 约定,那么您为什么要冒着让他们感到困惑的风险来使用复选框而不是单选输入呢? 【参考方案1】:

我只找到了以下方式

首先: 将属性 onClick 和值 check(this) 添加到您的每个复选框。

第二: 将以下 jquery 函数添加到您的代码中:

function check(clickedObj)

  //Have you clicked checkbox checked or not?
  let checkboxState =$(clickedObj).prop( "checked" );
  //Find the container div and the find all containing checkboxes
  let checkboxes = $(clickedObj).parent().parent().find("input[type='checkbox']");
  //Loop through all foundend checkboxes and uncheck all
  $(checkboxes).each(function()
  
    $(this).removeAttr("checked");
  )
  //Restore selected checkbox state in case you wanted to check it
  if (checkboxState == true) 
    $(clickedObj).prop("checked", true);
  

根据我的 jsfiddle 它确实有效。欢迎任何改进的想法。 :-)

【讨论】:

它对我不起作用codepen.io/Happster/pen/MWjdaVm @Monte 因为您还没有阅读我的完整答案;-) 您忘记执行第一步。 我做了,除非我做错了? &lt;label&gt;&lt;input type="checkbox" name="drums" onclick='check(this);'&gt;&lt;span&gt;&lt;/span&gt; Drums&lt;/label&gt;,你在 jsfiddle 上有工作代码的链接吗? jsfiddle.net/reporter/qhtcdxu2/56 顺便说一句,您的 html 中有语法错误。缺少结束标签标记。也许这就是原因。

以上是关于像单选按钮一样的复选框,仅限于一个选择,取消选中是不是选中了其他复选框的主要内容,如果未能解决你的问题,请参考以下文章

jQuery:使复选框像单选按钮一样?

选择单选按钮后将复选框设置为选中状态

wps复选框无法使用出现checkbox

取消选中复选框时从收音机中删除“选中”

自定义单选按钮:如何取消选中? (复选框黑客)[重复]

取消选中带有 Material UI 的单选按钮