Question

我正在使用下面的脚本根据是否选中复选框来显示和隐藏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，并且仅在 BOTH 为checked时才显示paypal按钮（div），那会很奇妙吗？

非常感谢！

Answer 1

我也偷了马库斯的答案，但有以下改进：

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

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

Answer 2

使用jQuery可以有一个数组或只有两个设置为false的变量。检查按钮时，将该等效值设置为当前值的相反值（如果为false，则为真，反之亦然）。

以下是如何完成此操作的简单示例：http://jsfiddle.net/5Byes/

Answer 3

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

我偷了马库斯的小提琴并更新它以做你想做的事。

Answer 4

页面上只允许一个具有特定ID的元素。如果您想要更多 - 请使用class属性。另一方面，您可以将带有付款方式的所有div换成一个带有ID的div，例如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()）。

Answer 5

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

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/

根据是否选中复选框打开3个div

5 个答案: