Question

我正在尝试在用户选择某个单选按钮时显示<div>。我发现了一些很好的代码形式http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php，我为此自己调整了这个：

使用CSS＆amp;脚本：

 <style type="text/css">
    .box{padding: 2px;display: none;margin-top: 2px;border: 0px solid #000;}
    .red{ }
    .green{  }
    .blue{ }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="Tax representation"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        if($(this).attr("value")=="VAT recovery"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        if($(this).attr("value")=="Other"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        }
    });
});
</script>

然后我记得这个选择：

if (!empty($_REQUEST['object'])) { $object = $_REQUEST['object']; }

如果需要重新加载表单，请在表格中添加无线电选择以记住选择：

<input tabindex="1" type="radio" name="object" <?php if (isset($object) && $object=="Tax representation") echo "checked";?> value="Tax representation">Tax representation
<input tabindex="2" type="radio" name="object" <?php if (isset($object) && $object=="VAT recovery") echo "checked";?> value="VAT recovery">VAT recovery
<input tabindex="3" type="radio" name="object" <?php if (isset($object) && $object=="Other") echo "checked";?> value="Other">Other

关注<div>显示或隐藏：

    <div class="red box">text 1</div>
    <div class="green box">text 2</div>
    <div class="blue box">text 3</div>

现在我的问题是，当重新加载表单时，会记住无线电选择，但不会显示相应的<div>。我相信可能有一种方法可以改变脚本来点击＆＃34;点击＆＃34;选择＆＃34;选择＆＃34;或类似的东西。你能帮忙吗？

Answer 1

这与之前的答案类似，将行为提取到函数中，以便您可以在页面加载和事件中运行它：

function showBoxes(value) {
  if(value=="Tax representation"){
    $(".box").not(".red").hide();
    $(".red").show();
  }
  if(value=="VAT recovery"){
    $(".box").not(".green").hide();
    $(".green").show();
  }
  if(value=="Other"){
    $(".box").not(".blue").hide();
    $(".blue").show();
  }
}

$(document).ready(function(){
  showBoxes($("input[type='radio']:checked").attr("value"));
  $('input[type="radio"]').click(function(){
    showBoxes($(this).attr("value"));
  });
});

jsFiddle

Answer 2

使用Border代替change

click

然后，将您的函数移动到变量并在页面加载时调用它。

最终代码看起来应该是这样的。

$('input[type="radio"]').change(function(){

Answer 3

在import React, {PropTypes} from 'react'; import { Overlay, Panel, PanelHeader, PanelFooter, Button, Text, //Close, Space } from 'rebass'; function SuccessModal ({modalOpen}) { return ( <Overlay open={modalOpen} > <Panel theme="success"> <PanelHeader> Wicckkkeedd! <Space auto /> /> </PanelHeader> <img src='http://lorempixel.com/512/384/cats' style={{ maxWidth: '100%', height: 'auto' }} /> <Text> <b>Panel:</b> Something laid as a covering something else </Text> <PanelFooter> <Space auto /> <Button theme='success' children='Meow!' /> </PanelFooter> </Panel> </Overlay> ); } export default SuccessModal;代码之后和$('input[type="radio"]').click(function(){块

中添加此行

document.ready

只有单击单选按钮时，您当前的逻辑才会起作用。因此，当页面重新加载时，让我们触发已检查单选按钮的单击事件。哪个inturn将运行您的逻辑并相应地切换div。

如何根据检查的无线电显示/隐藏<div>，而不是单击

3 个答案: