2016-04-14 213 views
2

我想基於單選按鈕的狀態隱藏/顯示DIV通過單選按鈕狀態設置HTML元素可見性

我知道我可以添加一個聽衆到單選按鈕,並顯示/隱藏它,只要它被選中或取消選中(如this答案)。

是否有可以Divdisplay屬性的單選按鈕的:checked屬性,像$("#myDiv").visibility($("#myRadio").is('checked'));結合的方法嗎?

換句話說 - 我可以將顯示/可見性數據綁定到單選按鈕的狀態嗎?

也許這可以在css中輕鬆完成?

+1

'$( 「#myDiv」)切換($( 「#myRadio」)丙( '檢查' ));' – Rayon

+0

每次按鈕狀態改變時,是否會改變'myDiv'的可見性? – summerbulb

+1

你必須把它包裹在'radio'按鈕'change'事件中! – Rayon

回答

1

嗯,這取決於那正是你想要做你的事業部HTML元素的內容:

下面的例子是改變div的可見性:

$(document).ready(function() { 

    $("#myRadio").click(function() { 
     if($(this).is(':checked')){ 

      // if you want to change your Div's css property 
      $("#myDiv").css("visibility","hidden"); 

     }else{ 

      // Reverting back visibility to visible 
      $("#myDiv").css("visibility", "visible"); 

     } 
    }); 

}); 

下面的例子是改變div的顯示:

$(document).ready(function() { 

    $("#myRadio").click(function() { 
     if($(this).is(':checked')){ 

      // if you want to change your Div's Display None 
      $("#myDiv").hide(); 

     }else{ 

      // if you want to change your Div's Display BLOCK 
      $("#myDiv").show(); 

     } 
    }); 

}); 
0

使用可以使用jquery onchange e用下面的CSS

$(function() { 
 
\t $('input[type=radio]').on('change', function() { 
 
    \t $('#mydiv').toggle(); 
 
    }) 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id = "mydiv"class = "show-hide"> Hello </div> 
 
<div> 
 
<label>show-hide</label> 
 
<input type="radio" name="show"> 
 
</div>

+0

將相互排斥的CSS樣式添加到相同的元素可能會不必要地使解決方案複雜化並使故障排除變得更加困難。當然,它可以工作,但如果應用於更復雜的代碼,這種方法可能會非常快速地發生。 –

+1

不需要CSS類,你可以使用'toggle'而不是'toggleClass' –

1
$('#myRadio').on('click', function(){ 
    if($(this).prop('checked')){ 
     $('#myDiv').show(); 
    } else { 
     $('#myDiv').hide(); 
    } 
}); 

以上腳本將檢查天氣單選按鈕被點擊或不按每次點擊

1
$(document).ready(function() { 
    $("#myRadio").on("change", function() { 
     $("#myDiv").css("visibility" ? $(this).is(":checked") ? "visible" : "hidden"); 
    }); 

}); 

OR

$('#myRadio').on('change', function(){ 
    if($(this).is(':checked')) 
     $('#myDiv').show(); 
    else 
     $('#myDiv').hide(); 
}); 
發泄

更改在技術上比點擊更好,所以當單擊已經選中的單選按鈕時,您不會運行此代碼。實際上,這是一回事。

1

如果你正在尋找一個簡單的CSS的解決方案,你應該檢查出this Question/Answer

您的無線輸入必須在同一水平,你要隱藏的股利。

HTML:

<input type="radio" name="d" id="reveal"><label>reveal it</label> 
<input type="radio" name="d" id="hideBack"><label>hide it</label> 
<div id="email"> 
    <form id="email-form" class="nice" action="" method="post"> 
     <input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" /> 
     <input type="hidden" name="name" id="id_name_email"> 
     <a class="btn" >Apply</a> 
    </form> 
</div> 

CSS:。

#reveal:not(:checked) ~ #email{ 
    display: none; 
} 
#reveal:checked ~ #email{ 
    display: block; 
} 
#email{ 
    display: none; 
} 

Fiddle