Question

我想从三个选项中一次选择一个选项。

目前我可以点击div选择广播，但我只想从列表中选择一个，所以它应该切换。

在这里查看我的小提琴：http://jsfiddle.net/wbgthtyb/

HTML：

<div class="grid-100">
   <div class="tckt-tab active">
      <input type="radio" name="one" value="one">one
   </div>
</div>
<div class="grid-100">
   <div class="tckt-tab">
       <input type="radio" name="two" value="two">two
    </div>
</div>
<div class="grid-100">
    <div class="tckt-tab">
         <input type="radio" name="three" value="three">three
     </div>
</div>

JS：

$(document).ready(function () {
    $(".tckt-tab").click(function () { //when click on flip radio button
        if ($(this) == $(this).find('input:radio').prop('checked', false)) {
            $(this).find('input:radio').prop('checked', true);
        }
    });

    $(".tckt-tab").click(function () { //when click on flip radio button
        if ($(this) == $(this).find('input:radio').prop('checked', true)) {
            $(this).find('input:radio').prop('checked', false);
        }
    });
});

Answer 1

单选按钮必须具有相同的名称，如果您只想使用其中一个

示例：

   <input type="radio" name="someCoolName" value="one">one
   <input type="radio" name="someCoolName" value="two">two
   <input type="radio" name="someCoolName" value="three">three

Answer 2

您应为所有单选按钮指定相同的名称。指定相同名称后，只能选择一个选项 -

更改html文件中的以下内容 -

<input type="radio" name="radio_name" value="one">one 
<input type="radio" name="radio_name" value="two">two
<input type="radio" name="radio_name" value="three">three

Answer 3

单选按钮名称必须相同。这是更新后的代码

  <div class="grid-100">
    <div class="tckt-tab active">
        <input type="radio" name="one" value="one">one</div>
</div>
<div class="grid-100">
    <div class="tckt-tab">
        <input type="radio" name="one" value="two">two</div>
</div>
<div class="grid-100">
    <div class="tckt-tab">
        <input type="radio" name="one" value="three">three</div>
    </div>

Answer 4

希望这些对您有用。

$(document).ready(function () {
    $(".tckt-tab").click(function () { //when click on flip radio button

        if (!$(this).find('input:radio').prop('checked')) {

            $(this).find('input:radio').prop('checked', true);
        } else {
            $(this).find('input:radio').prop('checked', false);  
        }
    });
});

.tckt-tab{
    padding: 10px 10px;
    background-color: gray;
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="grid-100">
   <div class="tckt-tab active">
      <input type="radio" name="yourColumnname" value="one">one
   </div>
</div>
<div class="grid-100">
   <div class="tckt-tab">
       <input type="radio" name="yourColumnname" value="two">two
    </div>
</div>
<div class="grid-100">
    <div class="tckt-tab">
         <input type="radio" name="yourColumnname" value="three">three
     </div>
</div>

Answer 5

选项1 正确答案

$（document）.on（“ click”，“ .radioBtn”，函数（e）{

    $('input:radio').prop('checked', false);

    if (!$(this).find('input:radio').prop('checked')) {

        $(this).find('input:radio').prop('checked', true);
    } else {
        $(this).find('input:radio').prop('checked', false);
    }
});

一次选择一个单选按钮

5 个答案: