Javascript 显示jQuery复选框选择_Javascript_Jquery_Html_Jquery Mobile

Javascript 显示jQuery复选框选择

javascript jquery html jquery-mobile

Javascript 显示jQuery复选框选择,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,加载页面后，此网页当前显示rss提要中所有类别的数据。我的问题是有几个类别，我希望用户选择和显示。总共有10个类别，每个类别对应一个单独的rss提要。有人能解释一下我是如何处理这件事的吗？此外，如果选择了其中一个类别，它是否会自动覆盖当前显示的数据？如果需要，我将详细说明任何不清楚的部分。谢谢大家! <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/mobile/1.

加载页面后，此网页当前显示rss提要中所有类别的数据。我的问题是有几个类别，我希望用户选择和显示。总共有10个类别，每个类别对应一个单独的rss提要。有人能解释一下我是如何处理这件事的吗？此外，如果选择了其中一个类别，它是否会自动覆盖当前显示的数据？如果需要，我将详细说明任何不清楚的部分。谢谢大家!

<!DOCTYPE html> 
<html>

<head>

<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
            type: 'GET',
            url: '/example',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    //var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                      var displaytitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>"  
                    $('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+description+'</p>');

                });
            }
        });
});
</script>

</head> 
<body> 

<div data-role="page" id="page">
<!-- /field panel -->
    <div data-role="panel" id="fieldpanel" data-position="left" data-display="push">
        <ul data-role="listview" data-inset="true" data-filter="false">
           <fieldset data-role="controlgroup">
        <legend>Categories</legend>
        <input type="checkbox" name="checkbox-bio" id="checkbox-bio">
        <label for="checkbox-bio">Bioengineering</label>
        <input type="checkbox" name="checkbox-com" id="checkbox-com">
        <label for="checkbox-com">Communications</label>
        <input type="checkbox" name="checkbox-eleP" id="checkbox-eleP">
        <label for="checkbox-eleP">Electrical/Power</label>
         <input type="checkbox" name="checkbox-eleD" id="checkbox-eleD">
        <label for="checkbox-eleD">Electronics/Design</label>
         <input type="checkbox" name="checkbox-nano" id="checkbox-nano">
        <label for="checkbox-nano">NanoEngineering</label>
         <input type="checkbox" name="checkbox-opt" id="checkbox-opt">
        <label for="checkbox-opt">Optics/Display</label>
         <input type="checkbox" name="checkbox-semi" id="checkbox-semi">
        <label for="checkbox-semi">Semiconductors</label>
    </fieldset>
        </ul>
    </div><!-- /field panel -->

      <!-- /settings panel -->
     <div data-role="panel" id="settingspanel" data-position="right" data-display="push">
        <ul data-role="listview" data-inset="true" data-filter="false">
          <li><a href="http://">Join IEEE</a></li>
          <li><a href="http://"> subscription services</a></li>

        </ul>
    </div><!-- /settings panel -->


    <div data-role="header" data-theme="b">
    <a href="#fieldpanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Menu</a>
    <a href="#settingspanel" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">Settings</a>

    <h1>MOBILE</h1>

</div>
    <div data-role="content">   
        <div id="feedContainer"></div>  
        <h3></h3>
        <p></p>

    </div>
    <div data-role="footer">
        <h4>Advertisements</h4>
    </div>
</div>


</body>
</html>

我将假设您想要获得有关此代码的基本信息

好的，首先要处理的是要显示的数据的类型

<input type="checkbox" id="1" />
<input type="checkbox" id="2" />

因此，这是当复选框上发生单击事件时将执行的基本代码。现在，在您的代码中，您将使用类似ajax的东西，然后在.html之前添加ajax请求代码，并在那里编写响应

要更新显示的内容，您只需使用一个元素作为应用程序的基本剪贴板。为什么？因为每次你获取数据时，你都需要将当前内容替换为该内容，这样你将只获取当前数据；选择的数据

让我们尝试代码中的一个复选框：

<input type="checkbox" name="checkbox-bio" id="checkbox-bio">
<label for="checkbox-bio">Bioengineering</label>
<input type="checkbox" name="checkbox-com" id="checkbox-com">
<label for="checkbox-com">Communications</label>

但是只需要在那里进行更改，而不是发送相同的请求，尝试在那里添加更多内容

$.ajax({ 
  // url and datatype here,
  data: value
  // success function goes here
});

请注意，该值是我们从复选框中获取的变量。它将与请求一起发送，这样您就可以只处理RSS的必要部分，而保留所有其他部分，就像if-else块一样

这是一把小提琴

但是我很抱歉，我没有包括if-else块以使代码按预期的方式工作。但是你会明白如何处理这个问题。

我正在仔细阅读，感谢你的全面回复！我很快会让你知道事情的进展。干杯因此，我仍在尝试将所有内容组合在一起，但我不确定这部分：$.ajax{//url和数据类型在这里，数据：value//success function在这里}；你能给我解释一下这部分吗？$.ajax{//url和数据类型在这里，data:value//success函数在这里}；这部分是对数据的ajax请求。但在成功添加数据之前，数据是与请求一起发送的字符串，如查询字符串，即？data=value。。这边好的，我跟着。我在google+上给你发了一条消息，你介意我把我目前拥有的东西发出去吗？

$('input[type="checkbox"]').click(function () {
  // and all others will be here just as they are.. to check the id
  // your ajax request is perfect, just copy paste that here..:)
});

$.ajax({ 
  // url and datatype here,
  data: value
  // success function goes here
});