Question

我正在使用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>

Answer 1

您可以这样检查：

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）使用：

if($_POST['myHiddenInput'] == '1') ....

bootstrap自定义单选按钮切换隐藏输入

1 个答案: