代码之家 › 专栏 › 技术社区 › David Brierton

艾切克。js单选按钮在通过表单进行选项卡(32)时自动选中

icheck twitter-bootstrap html jquery javascript

David Brierton · 技术社区 · 8 年前

这是一个示例,只需在表单中进行选项卡,查看它如何自动检查单选按钮。有人知道我如何改变我的选择吗。js,这样就不会发生? 我试图仍然能够通过单选按钮进行标签,但不能让它自动检查第一个。我想让它们与鼠标悬停时的外观效果相同。如果你想用空格键选择它们,只需要一个环

我曾在其他论坛上看到,这是一个正在研究的问题,但这是几年前的问题,无法找到解决办法。

任何帮助都将不胜感激!

<fieldset class="radio-strip">
    <label class="checked">
      <input name="amt" value="10" type="radio">
      <span class="label-text">$<strong>10</strong></span>
    </label>
    <label>
      <input name="amt" value="25" type="radio">
      <span class="label-text">$<strong>25</strong></span>
    </label>
    <label>
      <input name="amt" value="50" type="radio">
      <span class="label-text">$<strong>50</strong></span>
    </label>
    <label>
      <input name="amt" value="100" type="radio">
      <span class="label-text">$<strong>100</strong></span>
    </label>
  </fieldset>
</body>

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});

但是,有一个问题。你如何区分你在哪个单选按钮上?

2 回复 | 直到 8 年前

Kalimah Laxman Edara 8 年前

您可以设置无线电输入元素的样式,而不需要jQuery或任何插件。

我删除了表结构,因为它是不必要的HTML,并用div元素替换了它。

看这个例子 (更新代码) :

body {
  background-color: white;
  margin: 0;
  padding: 0;
}
input[type='radio'] {
  display: none;
}
.radio {
  border: 1px solid #b3b4b4;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  float: left;
  height: 16px;
  margin: 10px 10px 0 0;
  padding: 10px;
  position: relative;
  width: 16px;
}
.row:hover .radio {
  border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
  background-color: #218996;
  border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
  content: "â ";
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size:
}
.row {
  border-bottom: 1px solid #dcdcdc;
  padding: 0 5px;
}
.row label {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.row > label:last-child {
  padding: 12px 0;
  width: calc(100% - 50px);
  cursor: pointer;
}

<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
  <div>
    <!---Label is here for placement of error message--->
    <label for="rgroup" class="error" style="display:none;">Please choose one.</label>
  </div>

  <div class='row'>
    <input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
    <label for="one" class='radio' tabindex='1'></label>
    <label for="one">MOTOR VEHICLE / TRAVEL TRAILER TITLE</label>
  </div>

  <div class='row'>
    <input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
    <label for="two" class='radio' tabindex='1'></label>
    <label for="two">MOBILE HOME</label>
  </div>

  <div class='row'>
    <input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
    <label for="three" class='radio' tabindex='1'></label>
    <label for="three">VESSEL</label>
  </div>

  <div class='row'>
    <input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
    <label for="four" class='radio' tabindex='1'></label>
    <label for="four">DUPLICATE</label>
  </div>

  <div>
    <button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
  </div>

Community CDub 4 年前

从…起 MDN :

tabindex全局属性是一个整数,指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航,如果是,在什么位置。它可以有几个值:

负值表示元素应可聚焦,但不应通过顺序键盘导航访问;

因此,您可以将单选按钮的tabindex设置为-1:

片段:

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});
jQuery('input').attr("tabindex", "-1");

.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url('data:image/png;base64,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') no-repeat;
  border: none;
  cursor: pointer;
}

.icheckbox_square-blue {
  background-position: 0 0;
}

.icheckbox_square-blue.hover {
  background-position: -24px 0;
}

.icheckbox_square-blue.checked {
  background-position: -48px 0;
}

.icheckbox_square-blue.disabled {
  background-position: -72px 0;
  cursor: default;
}

.icheckbox_square-blue.checked.disabled {
  background-position: -96px 0;
}

.iradio_square-blue {
  background-position: -120px 0;
}

.iradio_square-blue.hover {
  background-position: -144px 0;
}

.iradio_square-blue.checked {
  background-position: -168px 0;
}

.iradio_square-blue.disabled {
  background-position: -192px 0;
  cursor: default;
}

.iradio_square-blue.checked.disabled {
  background-position: -216px 0;
}


/* HiDPI support */

@media (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi),
  (min-resolution: 1.25dppx) {
    .icheckbox_square-blue,
    .iradio_square-blue {
      background-image: url('data:image/png;base64,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');
      -webkit-background-size: 240px 24px;
      background-size: 240px 24px;
    }
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/fronteed/icheck/1.x/icheck.min.js"></script>


<fieldset class="radio-strip">
    <label class="checked">
        <input name="amt" value="10" type="radio">
        <span class="label-text">$<strong>10</strong></span>
    </label>
    <label>
        <input name="amt" value="25" type="radio">
        <span class="label-text">$<strong>25</strong></span>
    </label>
    <label>
        <input name="amt" value="50" type="radio">
        <span class="label-text">$<strong>50</strong></span>
    </label>
    <label>
        <input name="amt" value="100" type="radio">
        <span class="label-text">$<strong>100</strong></span>
    </label>
</fieldset>