Question

如何知道使用javaScript按下按钮的内容？

<div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
  <div id="insert_data__radio_gender" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="options" id="insert_data__radio_gender_f" autocomplete="off">Female
    </label>
    <label class="btn btn-primary active">
      <input type="radio" name="options" id="insert_data__radio_gender_m" autocomplete="off">Male
    </label>
  </div>
</div>

Answer 1

如果你正在使用JQuery，你可以使用它：

$('input[name="options"]:checked').val();

您需要将value属性添加到按钮tho。

Answer 2

也许你可以添加一个值=＆＃34; f＆＃34;和价值=＆＃34; m＆＃34;或从id

获取数据

<强> HTML

<div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
  <div id="insert_data__radio_gender" class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
    <input type="radio" name="options" id="insert_data__radio_gender_f" value="f" autocomplete="off">Female
   </label>
   <label class="btn btn-primary active">
    <input type="radio" name="options" id="insert_data__radio_gender_m" value="m" autocomplete="off">Male
   </label>
 </div>
</div>
<button onclick="chkRadios();">Check</button>

<强> JS

function chkRadios(){
  var radios = document.getElementsByName('options');

for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
          alert(radios[i].id);
          alert(radios[i].value);
          break;
      }
  }
};

DEMO

Answer 3

以下是使用JQuery的实例：

$('.btn-group input').on('change', function() {
  alert($('input[name="options"]:checked', '.btn-group').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
  <div id="insert_data__radio_gender" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="options" id="insert_data__radio_gender_f" autocomplete="off" value="Female">Female
    </label>
    <label class="btn btn-primary active">
      <input type="radio" name="options" id="insert_data__radio_gender_m" autocomplete="off" value="Male">Male
    </label>
  </div>
</div>

Answer 4

您应该做的第一件事就是给出两个单选按钮值：

<div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
    <div id="insert_data__radio_gender" class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="radio" value="female" name="options" id="insert_data__radio_gender_f" autocomplete="off">Female
        </label>
        <label class="btn btn-primary active">
            <input type="radio" value="male" name="options" id="insert_data__radio_gender_m" autocomplete="off">Male
        </label>
    </div>
</div>

然后在jQuery中你可以做类似的事情：

$('input[name='options']:checked').val();

或者在简单的javascript中：

var inputs = document.getElementsByName('options');
var gender;
for (var i=0;i<inputs.length;i++){
    if (inputs[i].checked) {
        gender = inputs[i].value;
    }
}

或者IE9 +（普通javascript）：

document.querySelector('input[name="options"]:checked').value;

Answer 5

试试这个（未经测试的）代码，请告诉我它是否有效：

var semaphores = {};
var myCheckboxes = document.querySelectorAll("label.btn-primary");
for (var checkbox in myCheckboxes) {
    var myCheckbox = myCheckboxes[checkbox].querySelector("input");
    semaphores[checkbox] = true;
    myCheckboxes[checkbox].onclick = function() {
        if (!semaphores[checkbox]) {
            semaphores[checkbox] = true;
            return;
        }
        semaphores[checkbox] = false;
        myCheckbox.click();
        return false;
    };
    myCheckbox.onclick = function() {
        semaphores[checkbox] = false;
    };
}

Answer 6


    var idOfSelected = $('input[type=radio][name=options]:checked').attr('id');
    if(idOfSelected=="insert_data__radio_gender_f")
       alert("Female");
    else
       alert("Male");

如果您不想设置值属性，也可以执行此操作

Answer 7

$("#insert_data__radio_gender").on("change",function(){
  var female=($("#insert_data__radio_gender_f").is("checked"));
  var male=($("#insert_data__radio_gender_m").is("checked"));
});

您可以使用$("#selector_id").is("checked")检查输入是否已选中

如何读取切换btn的值？

7 个答案: