0

我想为复选框设置事件以显示内容。

If check="Twitter" -> 显示 twitter 内容 If check="Facebook" -> 显示 facebook 内容

如果选中所有（twitter + facebook）-> 显示 twitter + facebook 的内容

需要选择 twitter 或 facebook。

我处理复选框的事件，但不显示每个复选框的内容：http: //jsfiddle.net/vinhnguyenle/hHnUV/

        var $twitter =  $('input[name=twitter]'),
            $facebook = $('input[name=facebook]');

    $twitter.click(function(e) {
        if (!!$facebook.prop('checked') == false) {
            e.preventDefault();
        }
    });

    $facebook.click(function(e) {
        if (!!$twitter.prop('checked') == false) {
            e.preventDefault();
        }
    });

    $twitter.trigger('click');

请帮我显示选中的每个复选框的内容。

谢谢，

4

4 回答 4

0

根据您的要求，如果选择 Facebook，则无法选择 twitter，我认为带有以下选项的单选按钮：“Twitter，Facebook，两者”似乎更有意义。

JS 变化：

$(document).ready(function() {   
    $("input:radio").click(function() {
        var test = $(this).val();

        $('#Facebook, #Twitter').hide();        
        $("#"+test).fadeIn();

        if(test == "Both")
        {
            $('#Facebook, #Twitter').fadeIn();
        }
    });     
});

HTML 更改：

<input type="radio" name="social" value="Twitter" checked /> Twitter
<input type="radio" name="social" value="Facebook" /> Facebook
<input type="radio" name="social" value="Both" /> Both
<div id="Facebook" style="display:none;">Facebook Content</div>
<div id="Twitter">Twitter Content</div>

JS Fiddle 在这里

于 2013-03-04T16:23:57.170 回答
0

我建议：

$('div[id]').each(function(){
    if ($('input[name="' + this.id + '"]').is(':checked')){
        $(this).show();
    }
    else {
        $(this).hide();
    }
});

$('input').change(function (e) {
    $('#' + this.name)[this.checked == true ? 'show' : 'hide']();
});

JS 小提琴演示。

于 2013-03-04T15:26:09.963 回答
0

这会起作用，我添加了一些 div 来显示 facebook/twitter 内容：

$(document).ready(function() {    
    $('div[id]').each(function(){
        if ($('input[name="' + this.id + '"]').is(':checked')){
            $(this).show();
         }
        else {
            $(this).hide();
        }

    });

    var $twitter =  $('input[name=twitter]'),
        $facebook = $('input[name=facebook]')

    $twitter.click(function(e) {
        $('#twitter').fadeToggle();
    });

    $facebook.click(function(e) {
        $('#facebook').fadeToggle();
    });

});

这是 .js 小提琴

于 2013-03-04T15:35:24.423 回答
0

您可以使用一个事件处理程序来监视这些输入的更改...

添加内容以向您展示行为...

代码在这里 :)

于 2013-03-04T15:38:37.293 回答