引导程序自定义单选按钮切换隐藏的输入

debugcn 发表于 Dev

史密斯先生

我正在使用bootsnipp中的自定义单选按钮代码段，并且在页面的说明中说可以使用隐藏的输入来切换值，但是我不太确定该怎么做。有人可以阐明这一点吗？可以说，我希望第二组仅在使用jQuery选择了第一组中的第一个选项时才显示。

$('.radioBtn a').on('click', function(){
	    var sel = $(this).data('title');
	    var tog = $(this).data('toggle');
	    $('#'+tog).prop('value', sel);
	    
	    $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
	    $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
	});

.radioBtn .notActive{
    	color: #3276b1;
    	background-color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<div class="input-group">
  <div class="radioBtn btn-group">
    <a class="btn btn-primary btn-sm active" data-toggle="option-set-one" data-title="option-one">Option 1</a>
    <a class="btn btn-primary btn-sm notActive" data-toggle="option-set-one" data-title="option-two">Option 2</a>
  </div>
  <input type="hidden" name="option-set-one" id="option-set-one">
</div>

<div class="input-group">
  <div class="radioBtn btn-group">
    <a class="btn btn-primary btn-sm active" data-toggle="option-set-two" data-title="option-three">Option 3</a>
    <a class="btn btn-primary btn-sm notActive" data-toggle="option-set-two" data-title="option-four">Option 4</a>
  </div>
  <input type="hidden" name="option-set-two" id="option-set-two">
</div>

Yotam单体

您可以像这样检查它：

if($('a[data-title="option-one"]').hasClass('active'))
    alert('option one is active');
else
    alert('option one is inactive');

还要注意我对标记所做的更改class，在同一元素上不能有两个属性。如果要在同一个元素上使用两个不同的类，则将其编写为：class="myClass1 myClass2"

要在PHP中进行检查，您必须使用隐藏的输入，if只需使用，即可在提交之前使用来更改输入的值：

if($('a[data-title="option-one"]').hasClass('active'))
        $('input[name="myHiddenInput"]').val(1);
    else
        $('input[name="myHiddenInput"]').val(0);

然后在您的PHP代码中（假设POST）使用：