0

我正在使用下面的脚本根据是否选中复选框来显示和隐藏 div，如果是这样，我可以显示/隐藏 paypal 按钮，直到他们接受条款。

但是我们现在想要提供三种支付选项，所以它需要打开/关闭 3 个 div，我尝试只复制 div 3 次，但它仍然只打开一个。任何机构都可以帮我解决这个问题吗？

<script type="text/javascript">
function doInputs(obj){
  var checkboxs = obj.form.c1;
  var i =0, box;
  document.getElementById('mydiv').style.display = 'none';
  while(box = checkboxs[i++]){
    if(!box.checked)continue;
    document.getElementById('mydiv').style.display = '';
    break;
  }
}
</script>

<form>
  <input type="checkbox" name="c1" onclick="doInputs(this)">
</form>
<div id="mydiv" style="display:none">
  <input type="text">
</div>

如果有人可以帮助我添加另一个checkbox，并让贝宝按钮（div）仅在两者都显示时显示，那将是惊人的checked？

非常感谢！

4

5 回答 5

1

我还偷了 Marcus 的答案，但做了以下改进：

  • 我使用 jQuery 文档就绪事件，因此代码在页面加载后触发
  • 我简化了逻辑
  • 它适用于多种付款方式

http://jsfiddle.net/5Byes/3/

于 2012-05-24T18:26:50.840 回答
0

使用 jQuery，您可以有一个数组或只有两个设置为 false 的变量。当一个按钮被选中时，你将这个等效值设置为当前值的相反值（所以如果它是假的，它就会变成真，反之亦然）。

这是一个简单的示例，说明如何完成此操作：http: //jsfiddle.net/5Byes/

于 2012-05-24T18:19:01.657 回答
0

http://jsfiddle.net/5Byes/4/

我偷了 Marcus 的小提琴并对其进行了更新以做你想做的事。

于 2012-05-24T18:24:19.290 回答
0

页面上只允许有一个具有特定 ID 的元素。如果你想要更多——使用class属性。另一方面，您可以将所有div带有支付方法的 s 包装在一个div带有 ID 的地方，比如说，paymentsMethods然后显示/隐藏它。

var paymentsDiv = document.getElementById('paymentsMethods');
if (box.checked) paymentsDiv.show(); else paymentsDiv.hide();

如果您想要 2 个复选框 - 将onclick两者设置为相同的处理程序并将条件更改为box1.checked && box2.checked.

使用 jQuery（在您的问题标签中），您可以$('#paymentsMethods').toogle()单击复选框（另请参阅$.hide()和$.show()）。

于 2012-05-24T18:26:56.247 回答
0

如果我正确理解你在找什么，你可以这样做：

HTML：

<input id="opt1cb" type="checkbox" value="Option 1" />Option 1<br />
<input id="opt2cb" type="checkbox" value="Option 2" />Option 2<br />
<input id="opt3cb" type="checkbox" value="Option 3" />Option 3<br />

<div class="option" id="opt1">Option 1</div>
<div class="option" id="opt2">Option 2</div>
<div class="option" id="opt3">Option 3</div>
<div class="option" id="opt23">Option 2 & 3</div>

jQuery：

$('.option').hide();

$('#opt1cb').click( function() {
    if( $(this).prop("checked") ) {
        $('#opt1').show();
    } else {
        $('#opt1').hide();
    }
});

$('#opt2cb').click( function() {
    if( $(this).prop("checked") ) {
        $('#opt2').show();
        if( $('#opt3cb').prop("checked") )
            $('#opt23').show();
    } else {
        $('#opt2').hide();
        $('#opt23').hide();
    }
});

$('#opt3cb').click( function() {
    if( $(this).prop("checked") ) {
        $('#opt3').show();
        if( $('#opt2cb').prop("checked") )
            $('#opt23').show();
    } else {
        $('#opt3').hide();
        $('#opt23').hide();
    }
});

​ 在这里工作 jsfiddle：http: //jsfiddle.net/bCDqa/

于 2012-05-24T18:29:11.243 回答